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? — Sebastian Simon
– Sebastian Simon, Commented Mar 25, 2018 at 19:11

Ryan Lombardo · Accepted Answer · 2015-05-08 05:56:06Z

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 8, 2015 at 5:56

answered May 8, 2015 at 5:10

Ryan Lombardo

3331 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alejandro Iván Over a year ago

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() { /* ... */ };

Cross Vander Over a year ago

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?

Ryan Lombardo Over a year ago

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.

Cross Vander Over a year ago

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?

Emanuel Vintilă · Accepted Answer · 2015-05-08 05:05:10Z

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 8, 2015 at 5:05

Emanuel Vintilă

1,9494 gold badges25 silver badges38 bronze badges

5 Comments

Emanuel Vintilă Over a year ago

Yeah, but I changed it before moving the script at the bottom. And IMO onchange is better anyway.

Zee Over a year ago

@I'mnidhin. onkeyup is a keyboard event, it will fail if the user enters input using the arrow keys beside the input(using mouse).

Rayon Over a year ago

@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..

Emanuel Vintilă Over a year ago

What if I use the mouse to click on the arrows? Then there will be no event fired (related to the keyboard).

Cross Vander Over a year ago

doesn't work... @Ryan solution is what I want but there's a little misunderstood...

Collectives™ on Stack Overflow

Run JavaScript Function onkeyup not working

2 Answers 2

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related