Javascript循环和迭代答案

【问题标题】：Javascript Looping and iterationJavascript循环和迭代
【发布时间】：2015-02-12 16:43:44
【问题描述】：

这是我目前的 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 时，它会完全运行并完美运行，但是当输入到谷歌浏览器时，这意味着 javascript 中存在错误。

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

【问题讨论】：

呃...错误是什么？
代码看起来不错，你可能把它放在 DOM 中的元素之前
出来是Uncaught TypeError: Cannot read property 'value' of null
Why does jQuery or a DOM method such as getElementById not find the element? 的可能重复项

标签： javascript loops iteration accumulator

【解决方案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： “Uncaught TypeError: Cannot read property 'value' of null”，当一个DOM元素选择器函数（如getElementById()，querySelector()，@ 987654326@ 等）找不到元素（在这种情况下，由于它尚未加载，它返回 null。因此，在这种情况下，output 将为 null，并且您无法访问属性 value为空。

在 JSFiddle 中，您实际上可以通过在 Frameworks & Extensions 选项卡的第二个选择中选择“No wrap in”来禁用此功能。

【讨论】：

我试过这个和下面的评论，我仍然收到同样的错误信息。不确定我是否做错了什么。
好吧，我猜你只展示了部分代码，因为没有任何函数调用，如果你愿意，请用代码笔给我看完整的代码。
这就是除了html标签和head标签之外的全部代码
你能给我一个工作代码笔的链接吗？

【解决方案2】：

工作解决方案：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Shit get it together</title>
    </head>
    <body>
        <script>
            window.onload = function () {
                var input = document.getElementById("input");
                var output = document.getElementById("Result");

                document.getElementById("input-button").onclick = inputNumero;
                document.getElementById("calculate").onclick = calculator;

                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();
                }
            }
        </script>
        <div>
            <input type="text" id="input"><br>
            <input type="text" id="Result"><br>
            <button id="input-button">Add it in</button>
            <button id="calculate">Calculate</button>
        </div>
    </body>
</html>

【讨论】：

我试过这个和上面的评论，我仍然收到同样的错误信息。不确定我是否做错了什么。
Numero.push(parseFloat(input.value));
尝试重命名输入变量并将 id 更改为 my_num_input 之类的内容。

【解决方案3】：

这行得通：

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]);
}
var output = document.getElementById("Result");
output.value = parseFloat(result);
counter = 0;
Numero = [];
}

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

【讨论】：