Run JavaScript Function onkeyup not working

Question

I got old code of my apps that using javascript to calculate something, the logic is if 1 textbox filled, another textbox automatic filled, and when the second textbox filled, that another textbox will return text1 - text2, maybe You can look at this fiddle:

HTML:

<label>Price Start</label>
<input type="number" class="form-control" placeholder="Total Harga Diberikan" required="required" name="price" onkeyup="calculate()" id="price" />
<br />
<label>Discount</label>
<input type="number" class="form-control" placeholder="Nominal Potongan" name="jmlvoucher" onkeyup="calculate()" id="jmlvoucher" />
<br />
<label>Total</label>
<input type="number" class="form-control" placeholder="Total yang harus dibayarkan" required="required" name="total" id="total" />

Javascript:

function calculate(){
    var num1 = document.getElementById("price").value;
    var num2 = document.getElementById("jmlvoucher").value;

    var sum=parseFloat(num1)-parseFloat(num2);
    document.getElementById('total').value=sum.toString();
}

http://jsfiddle.net/n4anv5qn/2/

Already try to check error, but there's no error. Try to run it, it doesn't works. Any idea why?

Possible duplicate of [Why does this simple JSFiddle not work?](https://stackoverflow.com/questions/7043649/why-does-this-simple-jsfiddle-not-work) — Sebastian Simon, Mar 25 '18 at 19:11

Ryan Lombardo · Accepted Answer · 2015-05-08T05:56:06.973

3

There indeed is an error being generated as keyup is fired.

Uncaught ReferenceError: calculate is not defined

On JSFiddle you've chosen to put your JavaScript into the onLoad function which is wrong. You should instead choose No Wrap

See http://jsfiddle.net/n4anv5qn/5/

As requested, this code is an example of how you can still calculate your Total if your Discount is not filled. Simply check to see if the value you grabbed from num2 is blank and set it to a default value.

function calculate(){
    var num1 = document.getElementById("price").value;
    var num2 = document.getElementById("jmlvoucher").value;

    if (num2 == '')
        num2 = '0';

    var sum=parseFloat(num1)-parseFloat(num2);
    document.getElementById('total').value=sum.toString();
}

edited May 08 '15 at 05:56

answered May 08 '15 at 05:10

Ryan Lombardo

323
1
10

This is the correct answer. Another option is to define a global function if he uses `onLoad` event: `var target = document || window; target.calculate = function() { /* ... */ };` – Alejandro Iván May 08 '15 at 05:15
sorry, there's misunderstanding, if I type only in textbox 1, the third textbox must be filled too... Then if I type in textbox 2, the third textbox will substract text1 with text2... also, how to write nowrap at my php code? – Cross Vander May 08 '15 at 05:45
`No Wrap` in the context of JSFiddle simply means do not put your provided Javascript inside another piece of Javascript code. You can see Psioniax's example of where to put your Javascript. I've also added your request to the answer. – Ryan Lombardo May 08 '15 at 05:57
well, after putting the code to bottom my code works well.... thank you... I confused where to put answered marks.. on you or on Psioniax? – Cross Vander May 08 '15 at 06:03

score 0 · Answer 2 · answered May 08 '15 at 05:05

0

You should use onchange instead of onkeyup. Also put your scripts right before the closing body tag.

Here's how to do it:

<label>Price Start</label>
  <input type="number" class="form-control"name="price" onchange="calculate()" id="price" />
    <br />
    <label>Discount</label>
     <input type="number" class="form-control" onchange="calculate()" id="jmlvoucher" />
    <br />
    <label>Total</label>
  <input type="number" class="form-control" required="required" name="total" id="total" />

    <script>
    function calculate(){
  var num1 = document.getElementById("price").value;
  var num2 = document.getElementById("jmlvoucher").value;

  var sum = parseFloat(num1) - parseFloat(num2);
  document.getElementById('total').value = sum;
    }
    </script>

answered May 08 '15 at 05:05

Emanuel Vintilă

1,911
4
25
35

Yeah, but I changed it before moving the script at the bottom. And IMO `onchange` is better anyway. – Emanuel Vintilă May 08 '15 at 05:13
2

@I'mnidhin. `onkeyup` is a keyboard event, it will fail if the user enters input using the arrow keys beside the input(using mouse). – Zee May 08 '15 at 05:17
@Psioniax, in your example, event is being triggerer after the input element goes i blur state wheras if you go with keyup event, calculation will take place after the keyboard event is fired.. – Rayon May 08 '15 at 05:23
What if I use the mouse to click on the arrows? Then there will be no event fired (related to the keyboard). – Emanuel Vintilă May 08 '15 at 05:24
doesn't work... @Ryan solution is what I want but there's a little misunderstood... – Cross Vander May 08 '15 at 05:47

Run JavaScript Function onkeyup not working

2 Answers2