Javascript function does NOT load to onkeyup and onclick events

Question

I am trying to make a simple calculator with 4 options (/*+-) but somehow my onclick and onkeyup events refuse to work. I tried various methods to make my events work (adding preventDefault,return false) then I abandoned because I am not able to fix it up. If you don't mind, please help me!

HTML:

<body>
<div id="wrap">
  <div id="header">
      <h1>Simple Calculator</h1>
<form name="form" id="form"> 
    <input type="number" name="addta1" onkeyup="calc();"/>
  <span id="plusadd">+</span>
    <input type="number" name="addta2" onkeyup="calc();"/>
    =
    <span id="addresult"></span> 

    <br/>

    <input type="number" name="subta1" onkeyup="calc();"/>
    -
    <input type="number" name="subta2" onkeyup="calc();"/>
    =
    <span id="subresult"></span>

    <br/>

    <input type="number" name="multa1" onkeyup="calc();"/>
    *
    <input type="number" name="multa2" onkeyup="calc();"/>
    =
    <span id="mulresult"></span>

    <br/>

    <input type="number" name="divta1" onkeyup="calc();"/>
    /
    <input type="number" name="divta2" onkeyup="calc();"/>
    =
    <span id="divresult"></span>

    <br/>
  <div class="buttonwrap">
  <input onclick="calc();" type="submit" value="Submit" name="submit" method="post"/>
  <input type="reset" value="Reset" name="reset"/>
  </div>
</form>
  </div>
  </div>
  </body>

Javascript:

function calc() {
var addOne = parseInt(document.form.addta1.value);
var addTwo = parseInt(document.form.addta2.value);
var subOne = parseInt(document.form.subta1.value);
var subTwo = parseInt(document.form.subta2.value);
var mulOne = parseInt(document.form.multa1.value);
var mulTwo = parseInt(document.form.multa2.value);
var divOne = parseInt(document.form.divta1.value);
var divTwo = parseInt(document.form.divta2.value);

var addResult = addOne + addTwo
var subResult = subOne - subTwo
var mulResult = mulOne * mulTwo
var divResult = divOne / divTwo
document.getElementById('addresult').innerHTML = addResult;
document.getElementById('subresult').innerHTML = subResult;
document.getElementById('mulresult').innerHTML = mulResult;
document.getElementById('divresult').innerHTML = divResult;
}

Here is a fiddle with the CSS on it: http://jsfiddle.net/rPCYf/ I will rep and approve as usual every helpful post! Thanks in advance!

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

When you change the wrap option in jsfiddle from "onLoad" to "no wrap - in ", it will work.

See here: http://jsfiddle.net/rPCYf/1/

// no code changed

This answer explains it and gives you a couple more options.

Your submit button needs to return false in order to prevent refreshing the page (or use any other method).

And, another suggestion, use "onchange" instead of "onkeyup" to watch changes in the input fields (ideally, not using html attributes, but group binding)... See here (I've changed just the first two fields): http://jsfiddle.net/rPCYf/2/

SUMMARY

change jsfiddle wrap option to "no wrap..."
prevent submit button default action (the simplest way is to return false in the onclick call)
consider using change listeners instead of keyup listener as this will handle key presses, button clicks, mouse wheel actions, etc... It's a more natural approach to the desired behaviour.
group the appropriate input fields by a class, for example, and bind the event listener that way, instead of using a HTML attribute for each instance - it will make your code much more readable and maintainable

edited May 23 '17 at 10:25

Community

1
1

answered Dec 01 '13 at 17:03

Shomz

37,421
4
57
85

The problem is: It doesn't work on live or either saved as an .html and .js extension. – Stoyan Dec 01 '13 at 17:09
In fiddle it does work, however in live it does not. – Stoyan Dec 01 '13 at 17:21
Then either show the error messages or give us the url to the live preview, because there's no point in guessing. – Shomz Dec 01 '13 at 17:22
I did it the same by moving it to the end of the body but the problem comes when you save it as extensions to your computer and make them work. I am afraid that the submit button is causing the problem because it still 'refreshes' the page even with return false. – Stoyan Dec 01 '13 at 17:30
Then there has to be an error in the console because of the other code or the way you include the script. How exactly do you call the js file? – Shomz Dec 01 '13 at 17:33
Oh yea you are so damn right. I called it as external file and that's why it didn't work. I am curious why it didn't work as external file but works as internal script. – Stoyan Dec 01 '13 at 17:35

score 1 · Answer 2 · answered Dec 01 '13 at 17:09

You have picked "onload" as the wrapper for the JS in JSFiddle. This wraps all the JS in a function which is called when the load event fires.

A consequence (which is generally desired) of this is that your functions are no longer globals.

Since they aren't global, they are out of scope for your intrinsic event attributes.

Bind your event handlers with JavaScript instead of HTML attributes.

addEventListener('keypress', calc);

http://jsfiddle.net/rPCYf/3/

Javascript function does NOT load to onkeyup and onclick events

2 Answers2