Updating Values in HTML output based on changing input

Question

I currently have a set of fields and radio buttons that take in some user input. Here is an example:

<div id="age">
        <input type="number" name="age1" value=60>
</div>

I am displaying all the inputted values and want the display to change when the user modifies the input. This is my attempt:

    var inputElements = document.querySelectorAll('input');
    for(var i = 0, len = inputElements.length ; i < len ; i++) {
        inputElements[i].addEventListener('input', updateDisplay());
    }

     function updateDisplay () {
            console.log("test");
            var age = document.querySelector('input[name="age1"]').value;
            document.getElementById("ageComparison").innerHTML = age;
     }

I know that the program enters the method since the "test" message is printed to the console; however, I don't see any change in display according to changes in input. Would appreciate any help.

yezzz · Accepted Answer · 2017-02-12 20:47:11Z

2

While creating the eventlistener, you're just calling updateDisplay. Remove the (). Also, you did not put '#ageComparison' element in your code.

html:

<div id="age">
  <input type="number" name="age1" value=60>
</div>
<div id="ageComparison">
</div>

js:

var inputElements = document.querySelectorAll('input');
for (var i = 0; i < inputElements.length; i++) {
  inputElements[i].addEventListener('input', updateDisplay);
}

function updateDisplay() {
  console.log("test");
  var age = document.querySelector('input[name=age1]').value;
  document.getElementById("ageComparison").innerHTML = age;
}

Example: https://jsfiddle.net/m6r871t6/

answered Feb 12, 2017 at 20:47

yezzz

3,0381 gold badge12 silver badges20 bronze badges

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

Comments

ScaisEdge · Accepted Answer · 2017-02-12 20:46:53Z

1

Try avoiding the inner double quotes

   var age = document.querySelector('input[name=age1]').value;

try using

  inputElements[i].addEventListener('change', updateDisplay())

edited Feb 12, 2017 at 20:46

answered Feb 12, 2017 at 20:33

ScaisEdge

133k10 gold badges98 silver badges111 bronze badges

6 Comments

user2657817 Over a year ago

Thanks for your help scaisEdge. I am unable to see the effect of this. What do removing the double quotes do?

user2657817 Over a year ago

Yes and none of the output seemed to have changed.

ScaisEdge Over a year ago

if the test appear on console .. then the problem is in the selector or in the assignement .. (inside the selector string the inner quote are not needed )

user2657817 Over a year ago

Test does not appear on the console either, when the age input is changed.

ScaisEdge Over a year ago

then the problem is the listerner try using change .. answer updated .

|

Collectives™ on Stack Overflow

Updating Values in HTML output based on changing input

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related