Question

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

    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>

Answer 1

尝试这个

window.onload = function() {
    // defining buttons
    document.getElementById("TriangleButton");
    document.getElementById("ParallelogramButton");
    document.getElementById("TrapezoidButton");
    document.getElementById("CircleButton");

    // where answer gets shown
    document.getElementById("questionAnswer");

    var base, base2, height, radius;
    function get_newvalue(){
        // base, base2, height and radius input values
        base   = document.getElementById("base").value;
        base2  = document.getElementById("base2").value;
        height = document.getElementById("Height").value;
        radius = document.getElementById("Radius").value;
    }
    
    // actions when buttons get clicked
    TriangleButton.addEventListener('click', function(){
        get_newvalue();
        questionAnswer.innerText = (base * height/2)
    })
    ParallelogramButton.addEventListener('click', function(){
        get_newvalue();
        questionAnswer.innerText = (base * height);
    })   
    TrapezoidButton.addEventListener('click', function(){
        get_newvalue();
        questionAnswer.innerText = (1/2 * height * (base + base2));
    })
    CircleButton.addEventListener('click', function(){
        get_newvalue();
        questionAnswer.innerText = (3.14 * (radius * radius));
    })
}

<!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>
        <!-- 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>

        <p>What are you calculating?</p> <!-- buttons -->
        <div id="buttons" class="buttons">
            <button id="TriangleButton">Triangle Area</button>
            <button id="ParallelogramButton">Parallelogram Area</button>
            <button id="TrapezoidButton">Trapezoid Area</button>
            <button id="CircleButton">Circle Area</button>
        </div>
        <!-- answer  -->
        <p id="questionAnswer"></p>
    </body>
</html>

Answer 2

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

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

我更改了您的代码，您可以在下面查看并运行它。

window.onload = function() {

  // defining buttons
  document.getElementById("TriangleButton");
  document.getElementById("ParallelogramButton");
  document.getElementById("TrapezoidButton");
  document.getElementById("CircleButton");
        
  // where answer gets shown
  document.getElementById("questionAnswer");  

  // TriangleButton action
  TriangleButton.addEventListener('click', function() {
  
    const base = document.getElementById("base").value
    const height = document.getElementById("Height").value
    const triangles = (base * height/2)
  
    questionAnswer.innerText = triangles
    
  })
  
  // ParallelogramButton action
  ParallelogramButton.addEventListener('click', function(){
  
    const base = document.getElementById("base").value
    const height = document.getElementById("Height").value
    const parallelogram = (base * height)
    
    questionAnswer.innerText = parallelogram
    
  })
  
  // TrapezoidButton action
  TrapezoidButton.addEventListener('click', function() {
  
    const base = document.getElementById("base").value
    const base2 = document.getElementById("base2").value
    const height = document.getElementById("Height").value
    const trapezoid = (1/2 * height * (base + base2))
    
    questionAnswer.innerText = trapezoid
     
  })
  
  // CircleButton action
  CircleButton.addEventListener('click', function() {
  
    const radius = document.getElementById("Radius").value
    const circle = (3.14 * (radius * radius))
    questionAnswer.innerText = circle
      
  })
  
}

<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>

从输入中获取数字值并进行计算

2 个答案: