javascript - 有谁知道如何使起始编号和终止编号产生无序的平方根列表？

我在弄清楚如何进行这项工作时遇到了麻烦。我需要StartNumber框的值为0，而EndNumber为12。单击ClickMe!时，它会生成每个平方根0-12的无序列表。

function wasClicked() {
  let firstBox = document.getElementById("startNumber");
  console.log("firstBox is " + firstBox);
  let startNumber = firstBox.Value;
  let secondBox = document.getElementById("endNumber");
  let endNumber = secondBox.value || 12;
  let line = "";
  for (let i = startNumber; i = endNUmber; i++) {
    line += "<li>The square root of " + i + " is " + Math.sqrt(i).toFixed(3) + "</li>\n";
  }
  console.log(line);
}

function isANumber(x) {
  return !isNaN(x);
}

<div>
  <label>Start Number:</label>
  <input type="text" id="startNumber" /><br>
</div>
<div>
  <label>End Number:</label>
  <input type="text" id="endNumber" /><br>
</div>
<div>
  <button onclick="wasClicked()">Click Me!</button>
</div>
<div></div>
<h2>The list</h2>
<ul id="theList"></ul>

最佳答案

您的代码有很多问题。

首先，JavaScript中的大小写很重要，因此它是firstBox.value而不是firstBox.Value，并且endNumber是与endNUmber完全不同的名称。确保您知道任何内置属性或方法的正确情况，并在变量名中使用一致的大小写。

其次，您的for循环语法已关闭。它应该是类似的东西

for (let i = start; i <= end; i++) ...

另外，HTML .value元素的<input>属性是一个字符串，因此，如果您想将其视为数字，则需要将其转换为数字。有几种方法可以做到这一点，但是对于本示例，我将使用Number.parseFloat。

最后，您将需要以某种方式在DOM上呈现结果。同样，有几种方法可以执行此操作，但是最简单的方法是Element.innerHTML。

将所有这些放在一起，您将获得以下内容：

function wasClicked() {
  let firstBox = document.getElementById("startNumber");
  let startNumber = Number.parseFloat(firstBox.value);
  let secondBox = document.getElementById("endNumber");
  let endNumber = Number.parseFloat(secondBox.value);
  let line = "";
  for (let i = startNumber; i <= endNumber; i++) {
    line += `<li>The square root of ${i} is ${Math.sqrt(i).toFixed(3)}</li>`;
  }
  document.getElementById("theList").innerHTML = line;
}

function isANumber(x) {
  return !isNaN(x);
}

<div>
  <label>Start Number:</label>
  <input type="text" id="startNumber" /><br>
</div>
<div>
  <label>End Number:</label>
  <input type="text" id="endNumber" /><br>
</div>
<div>
  <button onclick="wasClicked()">Click Me!</button>
</div>
<div></div>
<h2>The list</h2>
<ul id="theList"></ul>