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.
2 answers
solution1
1 2017-04-18 20:35:10
- When using
<input>you must remember that the values are strings not numbers (even fromtype="number"). So you must ensure that the values are converted just in case cohersion isn't working in your favor. I usedparseFloat()to convert the string values into numbers,parseInt()andNumberare 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.valueproperty 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> <input id="end" type="number" name="end" min="2" value="2"><br> <label>Step Number: </label> <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>
solution2
0 2017-04-18 19:29:57
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.
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.