I am trying to write the array to HTML but it keeps coming up as undefined

Question

<body>
    <h1>Find the Even #'s</h1>
    <p>Starting Number:</p>

    <input id="start" type="number" name="start" min="1" value="1"><br>
    <p>Ending Number:</p>
    <input id="end" type="number" name="end" min="1" value="1"><br>
    <p>Step Number:</p>
    <input id="step" type="number" name="step" min="1" value="1"><br>
    <button onclick="playGame()">Play Game</button>

    <br><br>

    <p id="result">#</p>


    <script type="text/javascript">
        function playGame(){
            var startNum = document.getElementById("start").value;
            var endNum = document.getElementById("end").value;
            var stepNum = document.getElementById("step").value;
            var Enumbers = new Array();

            for(var i = startNum; i <= endNum; i += stepNum){
                if(i % 2 == 0){
                    Enumbers.push(i);
                }
            }

            document.getElementById("result").innerHTML = Enumbers[];
        }
    </script>
</body>

If the array is already filled with data of any kind then I am able to write the array data to the html. I feel like the problem is that I am starting with an empty array and I am not filling the array correctly maybe. I just can't seem to figure out what I am doing wrong here.

No need to specify the `[]`. Simply: `document.getElementById("result").innerHTML = Enumbers;` — Andy T, Apr 18 '17 at 19:29
If you use the default values (1 for all three numbers) it will never iterate, since `i` will be 1, which is `<= endNum`, which is also 1, but `1 % 2 !== 0` so the `if` statement won't get run. Therefore nothing will be `push`ed to the array. — Heretic Monkey, Apr 18 '17 at 19:32
Using join method you can join the array by each character you want. `Enumbers.join(',')` — Farzin Kanzi, Apr 18 '17 at 19:34

score 1 · Answer 1 · edited Sep 25 '17 at 06:12

When using <input> you must remember that the values are strings not numbers (even from type="number"). So you must ensure that the values are converted just in case cohersion isn't working in your favor. I used parseFloat() to convert the string values into numbers, parseInt() and Number are options as well.
Instead of a <p> try displaying results with <output>, these elements are a form control like <input> among it's unique traits is the ability to display it's contents with the .value property like a form control or HTML/Text like a <div> or a <p>, etc.
I added 2 conditions in order to avoid bad input.

Snippet

html {
  font: 100 12px/1.3 Consolas;
}

input,
output,
button {
  font: inherit;
}

input {
  width: 10ch
}

<label>Starting Number: </label>
<input id="start" type="number" name="start" min="1" value="1"><br>
<label>Ending Number: </label>&nbsp;
<input id="end" type="number" name="end" min="2" value="2"><br>
<label>Step Number: </label>&nbsp;&nbsp;&nbsp;
<input id="step" type="number" name="step" min="1" value="1"><br>
<button onclick="playGame()">Play Game</button>

<br><br> #

<output id="result"></output>


<script>
  function playGame() {
    var start = parseFloat(document.getElementById("start").value);
    var end = parseFloat(document.getElementById("end").value);
    var step = parseFloat(document.getElementById("step").value);
    var even = [];

    if (end <= start) {
      alert('Starting Number must be less than Ending Number');
      return false
    } else if (step > (end - start)) {
      alert('Step Number cannot exceed ' + (end - start) + ' which is the difference between ' + start + ' and ' + end);
      return false
    } else


      for (let i = start; i <= end; i += step) {
        if (i % 2 === 0) {
          even.push(i);
        }

      }

    document.getElementById("result").value = even;


  }
</script>

score 0 · Answer 2 · answered Apr 18 '17 at 19:29

Try

document.getElementById("result").innerHTML = Enumbers.toString();

You can't just use Enumbers[].

Note, you can probably omit the .toString() and just use Enumbers. From MDN:

JavaScript calls the toString method automatically when an array is to be represented as a text value or when an array is referred to in a string concatenation.

I am trying to write the array to HTML but it keeps coming up as undefined

2 Answers2