使用 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 == 0
或 a === 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>
我正在尝试使用 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 == 0
或 a === 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>