Javascript循环和迭代
[英]Javascript Looping and iteration
问题描述
This is my HTML for the moment 
这是我目前的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>
and the javascript to go along with it is 和它一起去的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();
}
for some reason when it is inputted into codepen it will fully run and work perfectly however when put into Google Chrome it is implying that there is an error in the javascript. 由于某种原因，当将其输入到Codepen中时，它将完全运行并完美运行，但是，当将其放入Google Chrome中时，则表明javascript中存在错误。
EDIT: The error that Chrome and other browsers output is : Uncaught TypeError: Cannot read property 'value' of null 编辑：Chrome和其他浏览器输出的错误是：未捕获的TypeError：无法读取null的属性“值”
3 个解决方案
解决方案1
1 2015-02-12 16:52:26
That's beacause CodePen and JSFiddle wrap your code after the onload event by default, you should add your code in the window.onload event listener, like this: 这是因为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();
}
Note: You do not need to wrap your function declarations inside the load event, only the function calls & variables that need data from the DOM elements. 注意：您不需要将函数声明包装在load事件内，只需将需要DOM元素中数据的函数调用和变量包装起来即可。
Note2: "Uncaught TypeError: Cannot read property 'value' of null" , when a DOM element selector function (like getElementById() , querySelector() , getElementsByTagName() , etc) does not find an element (in this case because of it not being loaded yet, it returns null. So, in this case, output would be null, and you can't access the property value of null. 注意2：当DOM元素选择器函数（如getElementById() ， querySelector() ， getElementsByTagName()等）找不到元素时（在这种情况下，由于该原因，它是“未捕获的TypeError：无法读取null的属性'value'” getElementById()尚未加载，它将返回null，因此，在这种情况下， output将为null，并且您将无法访问null的属性value 。
In JSFiddle you can actually disable this feature by choosing "No wrap in " in the second select of the Frameworks & Extensions tab. 在JSFiddle中，您实际上可以通过在Frameworks＆Extensions选项卡的第二个选择中选择“ No wrap in”来禁用此功能。
解决方案2
0 2015-02-12 16:53:52
Working solution: 工作解决方案：
<!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>
解决方案3
0 2015-02-12 17:36:45
This works: 这有效：
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();
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.