Javascript Looping and iteration
Question
This is my HTML for the moment
<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
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.
EDIT: The error that Chrome and other browsers output is : Uncaught TypeError: Cannot read property 'value' of null
3 answers
solution1
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:
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.
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.
In JSFiddle you can actually disable this feature by choosing "No wrap in " in the second select of the Frameworks & Extensions tab.
solution2
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>
solution3
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();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.