Question

这似乎应该是一件相对容易的事情，但我无法弄清楚它为什么会发生。我试图根据文本输入声明两个值以用于进一步的计算，但每次显示结果时它都会显示为0.

var valOne = document.getElementById("value1").value;
var valTwo = document.getElementById("value2").value;

document.getElementById("add").addEventListener("click", function add(){
        var added = +valueOne + +valueTwo;
        document.getElementById("display").innerHTML = added;
    }, true);

当我将前两行放在add（）函数中时，它可以正常工作。

这是一个更大问题的一部分，我试图在输入两个输入值时显示计算结果，如果这有助于清除我正在搜索的内容。如果这是一个重复的问题我很抱歉，如果您需要任何其他信息，请告诉我！我觉得我已经尝试了一切来调试它，但我确定答案就在我面前，而我却错过了它。

Answer 1

这只存储这些元素的当前值：

var valOne = document.getElementById("value1").value;
var valTwo = document.getElementById("value2").value;

您需要存储元素而不是每个元素的值。

var elemOne = document.getElementById("value1"); // Store the element
var elemTwo = document.getElementById("value2"); // Store the element

使用对象Number将数字转换为数字。

document.getElementById("add").addEventListener("click", function add(){
    // Now use the entered value as number.
    var added = Number(elemOne.value) + Number(elemTwo.value); 
    document.getElementById("display").innerHTML = added;
}, true);

除了注意：

您无需为处理程序设置名称：

         +--- This is unnecessary.
         | 
         v
function add(){...}

您可以按照以下方式传递函数/处理程序：

function(){...}

获取innerHTML以更新并在键入输入值时显示新结果（无需单击按钮或刷新）

使用事件input捕获这些元素的更改。

var elemOne = document.getElementById("value1");
var elemTwo = document.getElementById("value2");
var total = document.getElementById("total");

function calculate() {
  total.textContent = (Number(elemOne.value) + Number(elemTwo.value)).toFixed(2);
}

[elemOne, elemTwo].forEach(function(e) {
  e.addEventListener('input', calculate);
});

<input type="number" id="value1" placeholder="Enter a number">
<p>
  <input type="number" id="value2" placeholder="Enter a number">
  <h1>
  Total:
  </h1>
  <hr>
  <h2 id="total">0</h2>

Answer 2

当您的脚本执行valOne且valTwo为零时，因为在您的html页面加载时，两个输入元素value1和value2都将为空

另一方面，几乎可以肯定的是，当您单击“添加”按钮时，您的输入元素具有值，因此如果将代码放在事件侦听器中，则会读取这些值。

您可以做的是保留对输入元素的引用：

var elmOne = document.getElementById("value1");
var elmTwo = document.getElementById("value2");

然后阅读事件监听器中的value属性。

全局变量存储为0 javascript

2 个答案: