Javascript 循环和迭代

Question

这是我目前的 HTML

<input type="text" id="input"><br>
<input type="text" id="Result"><br>
<button id="input-button" onclick="inputNumero()">Add it in</button>
<button id="calculate" onclick="calculator()">Calculate</button>

与之配套的 javascript 是

var input = document.getElementById("input");
var output = document.getElementById("Result");

var counter = 0;
var Numero = [];

function calculator() {
    var result = 0;
    if (counter < 4) {
        return alert("Missing A few numbers");
    }
    for (var i=0;i<4;i++) {
        result += parseFloat(Numero[i]);
    }
    output.value = parseFloat(result);
    counter = 0;
    Numero = [];
}

function inputNumero() {
    if (counter === 4) {
        return alert("You are putting too many numbers");
    }
    Numero.push(parseFloat(input.value));
    counter++;
    output.value = Numero.toString();
}

出于某种原因，当它输入到 codepen 时，它会完全运行并完美工作，但是当输入到 Google Chrome 中时，它意味着 javascript 中存在错误。

编辑:Chrome 和其他浏览器输出的错误是:Uncaught TypeError: Cannot read property 'value' of null

Answer 1

这是因为 CodePen 和 JSFiddle 默认情况下会在 onload 事件之后包装您的代码，因此您应该将代码添加到 window.onload 事件监听器中，如下所示:

window.addEventListener("load",function(){
  var input = document.getElementById("input");
  var output = document.getElementById("Result");

  var counter = 0;
  var Numero = [];
});

function calculator() {
  var result = 0;
  if (counter < 4) {
    return alert("Missing A few numbers");
  }
  for (var i=0;i<4;i++) {
    result += parseFloat(Numero[i]);
  }
  output.value = parseFloat(result);
  counter = 0;
  Numero = [];
}

function inputNumero() {
  if (counter === 4) {
    return alert("You are putting too many numbers");
  }
  Numero.push(parseFloat(input.value));
  counter++;
  output.value = Numero.toString();
}

注意:您不需要将函数声明包装在 load 事件中，只需将需要 DOM 元素数据的函数调用和变量包装起来即可。

注意2: “未捕获类型错误:无法读取 null 的属性“值””，当 DOM 元素选择器函数(如 getElementById()) >、querySelector()、getElementsByTagName() 等)未找到元素(在本例中，由于尚未加载，因此返回 null。因此，在在这种情况下，output 将为 null，并且您无法访问 null 的属性value。

在 JSFiddle 中，您实际上可以通过在框架和扩展选项卡的第二个选择中选择“不换行”来禁用此功能。