使用 HTML 和 JavaScript 的勾股定理计算器

Pythagorean Theorem Calculator using HTML and JavaScript

我正在尝试使用 HTML 和 Javascript 编写勾股定理计算器,以便它可以找到给定两个边值的任何边,所以我正在使用 if 语句,但它好像我无法理解为什么它不起作用

这里有 HTML 和 JavaScript 代码

function do_things() {
  var a = parseFloat(document.getElementById("a").value);
  var b = parseFloat(document.getElementById("b").value);
  var c = parseFloat(document.getElementById("c").value);
  var output = document.getElementById("output");

  if (a=0, b>0){
    var c = Math.sqrt(c*c - b*b)
    var node = document.createElement("LI");                 // Create a <li> node
    var textnode = document.createTextNode(c);              // Create a text node
    node.appendChild(textnode);                              // Append the text to <li>
    document.getElementById("output").appendChild(node);
  } else if (c=0, b>0){
    var c = Math.sqrt(a*a + b*b)
    console.log(0)
    var node = document.createElement("LI");                 // Create a <li> node
    var textnode = document.createTextNode(c);              // Create a text node
    node.appendChild(textnode);                              // Append the text to <li>
    document.getElementById("output").appendChild(node);
  }
}
<h1>Calc</h1>
<p1>Calculate the Hypotnuse given the A and B value</p1>
<p>Side A: <input type="text" id="a"/></p>
<br>
<p>Side B: <input type="text" id="b"/></p>
<br>
<p>Hypotnuse: <input type="text" id="c"/></p>
<br>
 <button type="button" onclick="do_things()">Find the missing value</button>
<br>
<p id="output">The Missing hypotnuse</p>

'===' 在这里可能 return 为假,因为您正在将值解析为浮点数,这将给出 0.00.

(a=0, b>0) 不是有效条件。 a = 0 是赋值,应该是 a == 0a === 0 并且 , 不作为 AND 运算符,&& 可以。所以你需要将该条件更改为 (a === 0 && b > 0).

但是您可以简化代码并使用更好的条件以及更好的 DOM 操作。以下是您的操作方法。

  • 使用Number.isNaN检查给定的输入是否真的是一个数字
  • 添加<span id="output"></span>保存结果,比整段更容易操作
  • 如果您需要向某个元素添加纯文本,只需使用 .textContent

当且仅当恰好提供 2 条边且第三条边为 NaN(空,但也是无效数字)时,此代码才能保证执行计算

function do_things() {

  var a = parseFloat(document.getElementById("a").value);
  var b = parseFloat(document.getElementById("b").value);
  var c = parseFloat(document.getElementById("c").value);
  var output = document.getElementById("output");

  if (Number.isNaN(a) && !Number.isNaN(b) && !Number.isNaN(c)) {
    const a = Math.sqrt(c ** 2 - b ** 2);
    output.textContent = ' ' + a;
  }

  if (Number.isNaN(b) && !Number.isNaN(a) && !Number.isNaN(c)) {
    const b = Math.sqrt(c ** 2 - a ** 2);
    output.textContent = ' ' + b;
  }

  if (Number.isNaN(c) && !Number.isNaN(a) && !Number.isNaN(b)) {
    const c = Math.sqrt(a ** 2 + b ** 2);
    output.textContent = ' ' + c;
  }
}
<h1>Calc</h1>
<p1>Calculate the Hypotnuse given the A and B value</p1>
<p>Side A: <input type="text" id="a"/></p>
<br>
<p>Side B: <input type="text" id="b"/></p>
<br>
<p>Hypotnuse: <input type="text" id="c"/></p>
<br>
 <button type="button" onclick="do_things()">Find the missing value</button>
<br>
<p >The Missing side is: <span id="output"></span></p>