存储为 0 javascript 的全局变量

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

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

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

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

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

然后读取事件侦听器中的 value 属性。

Answer 2

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

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/handler：

function(){...}

Get the innerHTML to update and display the new result as the input values are typed (without having to click a button or refresh)

使用事件 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>

存储为 0 javascript 的全局变量

Global variables stored as 0 javascript

javascript

variables

global