javascript onChange event listener not working for input form

Question

When I make this button:

<div id="Input #1">
<label for="input1">Input #1:</label>
<input type="number" id="input1" name="input1" onchange="i1set()">
</div>

And then have this JavaScript:

var i1 = undefined;
var i1set = function(){
  i1 = document.getElementById("input1").value;
}
var solution = parseFloat(i1)+parseFloat(i2);
    alert(solution);

It works no problem.

But, when I eliminate the onchange part of the html, and instead create an event listener in js, then I get problems. One of the problems is that having parseFloats give me "NaN" instead of a number answer... but the bigger problem is that even when I get rid of parseFloats, even with subtraction, addition, division, it gives me weird incorrect answers.

Below is my current code that no longer works:

<form>
 <input type="radio" id="addition" name="addition" value="addition"><label>Addition</label><br>
 <input type="radio" id="subtraction" name="subtraction" value="subtraction"><label>Subtraction</label><br>
 <input type="radio" id="multiplication" name="multiplication" value="multiplication"><label>Multiplication</label><br>
 <input type="radio" id="division" name="division" value="division"><label>Division</label><br>

 <div id="Input #1">
  <label for="input1">Input #1:</label>
  <input type="number" id="input1" name="input1">
 </div>
 <div id="Input #2">
  <label for="input2">Input #2:</label>
  <input type="number" id="input2" name="input2">
 </div>
 <input type="submit" id="submit" value="Solve" />
</form>

<script>
var i1 = undefined;
var i2 = undefined;
var i1set = function(){
i1 = document.getElementById("input1").value;
}
var i2set = function(){
i2 = document.getElementById("input2").value;
}
var solve = function(){
    if ( (i1 != undefined) && (i2 != undefined) ) {
        if(document.getElementById('addition').checked) {
    var solution = parseFloat(i1)+parseFloat(i2);
    alert(solution);
    }
    if(document.getElementById('subtraction').checked) {
    var solution = i1-i2;
    alert(solution);
    }
    if(document.getElementById('multiplication').checked) {
    var solution = i1*i2;
    alert(solution);
    }
    if(document.getElementById('division').checked) {
    var solution = i1/i2;
    alert(solution);
    }
    }
}
document.getElementById("input1").addEventListener("change", i1set(), false);
document.getElementById("input2").addEventListener("change", i2set(), false);
document.getElementById("submit").addEventListener("click", solve, false);

</script>
</body>
</html>

dfsq · Accepted Answer · 2015-03-15 20:24:28Z

0

The problem is that empty string is not equal to udnefined so this checkes:

if ((i1 != undefined) && (i2 != undefined)) {

behave not the way you expect. The if block can be simpler:

if (i1 && i2) { // or i1 !== '' && i2 !== ''

The second problem is that you need to provide function reference as event listener, not execute it immediately with ():

document.getElementById("input1").addEventListener("change", i1set, false);
//                             Note, you don't need () here ------^

answered Mar 15, 2015 at 20:24

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

javascript onChange event listener not working for input form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related