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中时，它将完全运行并且完美地运行，但是当放入谷歌浏览器时，这意味着javascript中存在错误。

编辑：Chrome和其他浏览器输出的错误是：未捕获的TypeError：无法读取属性'value'的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事件中包含函数声明，只需函数调用＆amp;需要DOM元素数据的变量。

注2： “未捕获的TypeError：无法读取null”的属性'value'，当DOM元素选择器函数（如getElementById()，{{1 }}，querySelector()等）找不到一个元素（在这种情况下因为它尚未被加载，它返回null。所以，在这种情况下，getElementsByTagName()将为null，你可以不能访问属性output的null。

在JSFiddle中，您可以通过在框架＆amp ;;的第二个选择中选择“No wrap in”来禁用此功能。扩展程序标签。

Answer 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>

Answer 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();
}

Javascript循环和迭代

3 个答案: