Question

我目前有一组字段和单选按钮，可以接收一些用户输入。这是一个例子：

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

我正在显示所有输入的值，并希望在用户修改输入时更改显示。这是我的尝试：

    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;
     }

我知道程序进入方法，因为＆＃34;测试＆＃34;消息打印到控制台;但是，根据输入的变化，我没有看到任何显示变化。非常感谢任何帮助。

Answer 1

在创建eventlistener时，您只需调用updateDisplay。删除()。另外，你没有把＃age;比较＆＃39;代码中的元素。

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;
}

示例：https://jsfiddle.net/m6r871t6/

Answer 2

尝试避免使用内部双引号

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

尝试使用

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

根据更改输入更新HTML输出中的值

2 个答案: