Javascript新手,尝试编写三角形斜边的代码,在DOM中按提交时没有任何React

utugiqy6 于 2023-04-10 发布在 Java

关注(0)|答案(3)|浏览(101)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    
        <label id="aLabel">Side A:</label><br>
        <input type="text" id="aTextBox"><br>
        <label id="bLabel">Side B:</label><br>
        <input type="text" id="bTextBox"><br>
        <button type="button" id="submit">submit</button><br>    
        <label id="cLabel"></label><br> 
       
        <script src="index.js"></script>
  
</body>
</html>

let a; 
let b;

// Calculate the length of the hypotenuse using the Pythagorean theorem
document.getElementById("submit").onClick = function(){

    a = document.getElementById("aTextBox").value;
    a = Number(a)

    b = document.getElementById("bTextBox").value;
    b = Number(b);

    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

    
    document.getElementById("cLabel").innerHTML = c;

    console.log("The hypotenuse of the triangle is: " + c);
}

我相信我正确地获取了DOM中的所有ID，并且正确地导入了js文件（它名为index.js，并且在同一个文件夹中，实际上它在键入时自动填充）我被难倒了，它应该是一个简单的等式，但我不知道我做错了什么或使用什么替代品。我真的很感激社区可以给予的任何编码帮助。

JavaScript

来源：https://stackoverflow.com/questions/75963220/new-to-javascript-trying-to-write-a-code-for-the-hypotenuse-of-a-triangle-noth

3条答案

按热度按时间

c6ubokkw1#

将onClick更改为onclick

document.getElementById("submit").onclick = function(){

    a = document.getElementById("aTextBox").value;
    a = Number(a)

    b = document.getElementById("bTextBox").value;
    b = Number(b);

    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

    
    document.getElementById("cLabel").innerHTML = c;

    console.log("The hypotenuse of the triangle is: " + c);
}

赞(0）回复(0）举报 2023-04-10

omjgkv6w2#

这是不工作，因为你得到提交按钮后添加的onclick。我为你重写了代码。请让我知道，如果这是工作，是你正在寻找的。

let submitBtn = document.getElementById("submit");

submitBtn.addEventListener("click", () => {

    let a = document.getElementById("aTextBox").value;
    let b = document.getElementById("bTextBox").value;

    a = Number(a);
    b = Number(b);

    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    document.getElementById("cLabel").innerHTML = c;
    console.log("The hypotenuse of the triangle is: " + c);

})

赞(0）回复(0）举报 2023-04-10

rxztt3cl3#

你这里的错误是你使用的onClick写的是 Camel 大小写，你可以通过将onClick修改为onclick来修复你的错误，只需将你的javascript代码替换为下面的代码：

let a; 
let b;

// Calculate the length of the hypotenuse using the Pythagorean theorem
document.getElementById("submit").onclick = function(){
    a = document.getElementById("aTextBox").value;
    a = Number(a)
    b = document.getElementById("bTextBox").value;
    b = Number(b);
    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    document.getElementById("cLabel").innerHTML = c;
    console.log("The hypotenuse of the triangle is: " + c);
}

注意：在这段JavaScript代码中，在你使用它们的地方之外声明一个变量是一个不好的做法，你可以重构你的代码以更优化：

将a和B变量放入函数中，以便使用它们。
在获取值时直接使用Number函数，以使代码易于理解。

你的代码应该是这样的：

// Assign the submit button to a const variable 
const submit = document.getElementById("submit");

// Add an event listener to the submit button.
submit.addEventListener('click', function() {
    let a = Number(document.getElementById("aTextBox").value);
    let b = Number(document.getElementById("bTextBox").value);
    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    const cLabel = document.getElementById("cLabel");
    cLabel .innerHTML = c;
    console.log("The hypotenuse of the triangle is: " + c);
});

这样你的代码就变得更可读。总是尽可能地让你的代码干净，这样调试错误对你来说就变得容易了。祝你好运！

赞(0）回复(0）举报 2023-04-10

我来回答

Javascript新手,尝试编写三角形斜边的代码,在DOM中按提交时没有任何React

3条答案

相关问题

热门标签

最新问答