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

Code seems fine, you probably placed it before the elements in the DOM — adeneo, Feb 12 '15 at 16:49
It comes out to say that it is Uncaught TypeError: Cannot read property 'value' of null — Dewritos, Feb 12 '15 at 16:50
possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Teemu, Feb 12 '15 at 16:52

undefined · Answer 1 · 2015-02-12T16:57:47.887

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.

I tried this and the comment below and I still receive the same error message. Not sure If I am doing anything wrong. — Dewritos, Feb 12 '15 at 17:07
Well you've only shown part of the code, I asume, because there isn't any function call, please show me the full code, in a code pen if you like to. — undefined, Feb 12 '15 at 17:35
Thats literally the whole code besides the html tags and head tags — Dewritos, Feb 12 '15 at 17:39

Jimmy · Answer 2 · 2015-02-12T18:07:25.513

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>

I tried this and the comment above and I still receive the same error message. Not sure If I am doing anything wrong. — Dewritos, Feb 12 '15 at 17:07
Try to rename input variable and change id to something like my_num_input. — Jimmy, Feb 12 '15 at 17:25

rajmeet singh · Answer 3 · 2015-02-13T04:30:13.280

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

Javascript Looping and iteration

3 Answers3