Javascript 从输入中获取数值并计算_Javascript_Html

Javascript 从输入中获取数值并计算

javascript html

Javascript 从输入中获取数值并计算,javascript,html,Javascript,Html,我一直在尝试调试以下代码： window.onload = function() { // defining buttons document.getElementById("TriangleButton"); document.getElementById("ParallelogramButton"); document.getElementById("TrapezoidButton"); document.getElem

我一直在尝试调试以下代码：

    window.onload = function() {
// defining buttons
        document.getElementById("TriangleButton");
        document.getElementById("ParallelogramButton");
        document.getElementById("TrapezoidButton");
        document.getElementById("CircleButton");
// where answer gets shown
        document.getElementById("questionAnswer");
// base, base2, height and radius input values
        var base = document.getElementById("base").value;
        var base2 = document.getElementById("base2").value;
        var height = document.getElementById("Height").value;
        var radius = document.getElementById("Radius").value;

// defining equations

        let circle = (3.14 * (radius * radius));
        let trapezoid = (1/2 * height * (base + base2));
        let parallelogram = (base * height);
        let triangles = (base * height/2)

        // actions when buttons get clicked

        TriangleButton.addEventListener('click', function(){
          questionAnswer.innerText = triangles
        })
        ParallelogramButton.addEventListener('click', function(){
          questionAnswer.innerText = parallelogram
        })   
        TrapezoidButton.addEventListener('click', function(){
          questionAnswer.innerText = trapezoid
        })
        CircleButton.addEventListener('click', function(){
            questionAnswer.innerText = circle
        })
    }

HTML文档：

<!DOCTYPE html>
<html>

    <head>
      <title>Daniel the 4th</title> // title of webpage
      <script type="text/javascript" src="Main.js"></script>  // linking js to html  
    </head>

    <body>
        <p>What are you calculating?</p> // buttons
        <div id="buttons" class="buttons">
        <p id="TriangleButton">Triangle Area</p>  
        <p id="ParallelogramButton">Parallelogram Area</p>
        <p id="TrapezoidButton">Trapezoid Area</p>
        <p id="CircleButton">Circle Area</p>
        </div>
        // number inputs
        <p>Enter necessary numbers here:</p>
        <p>Base: <input type="number" id="base"></p>
        <p>Base 2: <input type="number" id="base2"></p>
        <p>Height: <input type="number" id="Height"></p>
        <p>Radius: <input type="number" id="Radius"></p>
           // answer 
        <p id="questionAnswer"></p>
    </body>
</html>


Daniel第四个//网页标题
//将js链接到html
你在计算什么？//按钮
三角形区域
平行四边形区域
梯形区域
圆圈区域
//数字输入
在此处输入必要的数字：
基数：
基数2：
高度：
半径：
//答复

我测试了你的代码，所有答案都是0。因为您已经在“window.onload”事件中计算了答案，它们将显示为答案

您应该在每次单击按钮时获得输入值。然后计算答案

我已经更改了你的代码，你可以在下面看到并运行它

window.onload=function（）{
//定义按钮
document.getElementById（“三角按钮”）；
getElementById（“平行四边形按钮”）；
getElementById（“梯形按钮”）；
document.getElementById（“CircleButton”）；
//答案在哪里显示
document.getElementById（“问题答案”）；
//三角钮扣动作
三角形按钮。addEventListener（'click'，function（）{
const base=document.getElementById（“base”）.value
常量高度=document.getElementById（“高度”）.value
常量三角形=（基准*高度/2）
questionAnswer.innerText=三角形
})
//平行四边形按钮动作
平行四边形按钮。addEventListener（'单击'，函数（）{
const base=document.getElementById（“base”）.value
常量高度=document.getElementById（“高度”）.value
常数平行四边形=（基准*高度）
questionAnswer.innerText=平行四边形
})
//梯形按钮动作
梯形按钮。addEventListener（'click'，函数（）{
const base=document.getElementById（“base”）.value
const base2=document.getElementById（“base2”）.value
常量高度=document.getElementById（“高度”）.value
常量梯形=（1/2*高度*（基础+基础2））
questionAnswer.innerText=梯形
})
//环扣动作
CircleButton.addEventListener（'click'，function（）{
常量半径=document.getElementById（“半径”）.value
常数圆=（3.14*（半径*半径））
questionAnswer.innerText=圆圈
})
}

你在计算什么？//按钮
三角形区域
平行四边形区域
梯形区域
圆圈区域
//数字输入
在此处输入必要的数字：
基数：
基数2：
高度：
半径：
//答复

试试这个

window.onload=function（）{
//定义按钮
document.getElementById（“三角按钮”）；
getElementById（“平行四边形按钮”）；
getElementById（“梯形按钮”）；
document.getElementById（“CircleButton”）；
//答案在哪里显示
document.getElementById（“问题答案”）；
变量基底，基底2，高度，半径；
函数get_newvalue（）{
//基准、基准2、高度和半径输入值
base=document.getElementById（“base”）.value；
base2=document.getElementById（“base2”）.value；
高度=document.getElementById（“高度”）.value；
radius=document.getElementById（“radius”）.value；
}
//单击按钮时的操作
三角形按钮。addEventListener（'click'，function（）{
获取新值（）；
questionAnswer.innerText=（底部*高度/2）
})
平行四边形按钮。addEventListener（'单击'，函数（）{
获取新值（）；
questionAnswer.innerText=（底部*高度）；
})   
梯形按钮。addEventListener（'click'，函数（）{
获取新值（）；
questionAnswer.innerText=（1/2*高度*（底部+底部2））；
})
CircleButton.addEventListener（'click'，function（）{
获取新值（）；
questionAnswer.innerText=（3.14*（半径*半径））；
})
}


丹尼尔4号
在此处输入必要的数字：
基数：
基数2：
高度：
半径：
你在计算什么？
三角区
平行四边形面积
梯形面积
圆形区域

若要在此处获得最佳帮助，请添加此代码应执行的操作、实际执行的操作（不执行）以及您认为读者应该了解的任何错误/问题的说明。“我一直在尝试调试以下代码”然后发生了什么？你遇到路障了吗？你有什么事吗？