我正在嘗試將數組寫入HTML，但它一直未定義

<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>

如果數組已經填充了任何類型的數據，那麼我可以將數組數據寫入html。我覺得問題是我從一個空數組開始，而且我沒有正確地填充數組。我似乎無法弄清楚我在這裏做錯了什麼。我正在嘗試將數組寫入HTML，但它一直未定義

來源

2017-04-18 James McManus

無需指定'[]'。簡單地說：'document.getElementById（「result」）。innerHTML = Enumbers;' –

如果使用默認值（所有三個數字均爲1），它將永遠不會迭代，因爲'i'將爲1，即<= endNum '，這也是1，但'1％2！== 0'因此'if'語句不會運行。因此沒有任何東西會被推到陣列上。 –

您可能想讓'＃end'具有大於1的值。 –

嘗試

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

你不能只用。

請注意，您大概可以省略.toString()並僅使用Enumbers。從MDN：

的JavaScript自動調用toString方法時陣列是被表示爲文本值或當一個陣列中的字符串連接被參考。

來源

2017-04-18 19:29:57 Dave

當使用<input>你必須記住的是，值是字符串不是數字（甚至從type="number"）。所以你必須確保值被轉換，以防萬一cohersion不利於你的利益。我使用parseFloat()將字符串值轉換爲數字，parseInt()和Number也是選項。
而不是與<output>一個<p>嘗試顯示結果，這些元素就像中<input>表單控件的獨特特徵是，以顯示它的內容與.value性質類似形式的控制或HTML /文本像<div>或<p>的能力等
我添加了2個條件，以避免不良的輸入。

片段

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>

來源

2017-04-18 20:35:10 zer00ne

我正在嘗試將數組寫入HTML，但它一直未定義

回答

相關問題