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>

如果数组已经填充了任何类型的数据，那么我就可以将数组数据写入html。我觉得问题是我从一个空数组开始，我可能没有正确填充数组。我似乎无法弄清楚我在这里做错了什么。

Answer 1

使用<input>时，您必须记住值是字符串而不是数字（即使来自type="number"）。因此，您必须确保在cohersion不对您有利的情况下转换值。我使用parseFloat()将字符串值转换为数字，parseInt()和Number也是选项。
而不是<p>尝试使用<output>显示结果，而这些元素是<input>之类的表单控件，其中的独特特征是显示它的能力。包含.value属性的内容，如表单控件或HTML /文本，如<div>或<p>等。
我添加了2个条件以避免输入错误。

<强>段

＆＃13;

html {
  font: 100 12px/1.3 Consolas;
}

input,
output,
button {
  font: inherit;
}

input {
  width: 10ch
}

＆＃13;

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

＆＃13;

Answer 2

尝试

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

您不能只使用Enumbers[]。

注意，您可以省略.toString()并使用Enumbers。来自MDN：

当数组到时，JavaScript会自动调用toString方法表示为文本值或在a中引用数组时字符串连接。

我试图将数组写入HTML但它仍然未定义

2 个答案: