javascript - 有谁知道如何使起始数和结束数产生平方根的无序列表？

Question

我无法弄清楚如何进行这项工作。我需要 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>

Answer 1

您的代码有很多问题。

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

其次是你的for -loop 语法已关闭。它应该类似于

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

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