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和其他瀏覽器輸出的錯誤是：未捕獲的TypeError：無法讀取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：當DOM元素選擇器函數（如getElementById() ， querySelector() ， getElementsByTagName()等）找不到元素時（在這種情況下，由於該原因，它是“未捕獲的TypeError：無法讀取null的屬性'value'” getElementById()尚未加載，它將返回null，因此，在這種情況下， output將為null，並且您將無法訪問null的屬性value 。

在JSFiddle中，您實際上可以通過在Frameworks＆Extensions選項卡的第二個選擇中選擇“ 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 個解決方案

解決方案1
1 2015-02-12 16:52:26

解決方案2
0 2015-02-12 16:53:52

解決方案3
0 2015-02-12 17:36:45

Javascript循環和迭代

問題描述

3 個解決方案

解決方案1 1 2015-02-12 16:52:26

解決方案2 0 2015-02-12 16:53:52

解決方案3 0 2015-02-12 17:36:45

解決方案1
1 2015-02-12 16:52:26

解決方案2
0 2015-02-12 16:53:52

解決方案3
0 2015-02-12 17:36:45