Question

我想重置我的值输入，计算等级以及getElementById（＆＃34;＆＃34;），getElementById（＆＃34;和＆＃34;）。我一直在尝试各种不同的方法，似乎没有任何工作。我也尝试使用form方法，我的代码似乎崩溃了。

请帮忙！

我有以下代码（一切正常，除了重置按钮）：

＆＃13;

document.getElementById("button").onclick = function() {
  var a = document.getElementById("1").value * 0.4;
  var b = document.getElementById("2").value * 0.4;
  var c = document.getElementById("3").value * 0.2;
  var grade = a + b + c;
  document.getElementById("ans").innerHTML = grade;
  if (grade < 70) {
    document.getElementById("and").innerHTML = "bad"
  } else if (grade >= 70) {
    document.getElementById("an").innerHTML = "good"
  }

  document.div[1].addEventListener('reset', function() {
    document.getElementById('and', 'an', 'ans').innerHTML = '';
  });
}

＆＃13;

.legend {
  position: relative;
  width: 100%;
  display: block;
  padding: 20px;
  border-radius: 20px;
  background: #FFFF50;
  padding: 15px;
  color: black;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
}

.wrapper {
  border: 1px dashed #95a5a6;
  height: 56px;
  margin-top: 16px;
  border-radius: 4px;
  position: relative;
  font-size: 20px;
}

.wrapper p {
  line-height: 31px;
}

＆＃13;

<div id="thing">

  <legend class="legend">Average/Mean Calculator</legend>
  <div id="myForm">
    <p>
      What's Your First Grade?<input type="text" id="1" placeholder="Input 1st #"><br> What About Your Second Grade? <input type="text" id="2" placeholder="Input 2st #"><br> And Third? <input type="text" id="3" placeholder="Almost there 3rd #">
    </p>
    <button id="button">Calculate</button>
    <button onclick="myFunction()">Reset</button>
  </div>
  <p>
    Calculated Grade: <span id="ans" style="color: green;"></span>
  </p>

  <div class="wrapper">
    <p> <span id="an" style="color: green;"></span> <span id="and" style="color: red;"></span></p>
  </div>
</div>

＆＃13;

Answer 1

定义myFunction：

function myFunction(){
    document.getElementById('and','an','ans').innerHTML = '';
}

将calculate添加为函数，而不是将onclick事件侦听器添加到页面中的每个按钮。

<button id="button" onclick="calculate()">Calculate</button>

getElementById() 一次仅支持一个名称，并且只返回单个节点而不是节点数组。

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <style>
    .legend {
      position: relative;
      width: 100%;
      display: block;
      padding: 20px;
      border-radius: 20px;
      background: #FFFF50;
      padding: 15px;
      color: black;
      font-size: 20px;
      font-family: 'Open Sans', sans-serif;
    }
    
    .wrapper {
      border: 1px dashed #95a5a6;
      height: 56px;
      margin-top: 16px;
      border-radius: 4px;
      position: relative;
      font-size: 20px;
    }
    
    .wrapper p {
      line-height: 31px;
    }
  </style>

  <div id="thing">

    <legend class="legend">Average/Mean Calculator</legend>
    <div id="myForm">
      <p>
        What's Your First Grade?<input type="text" id="1" placeholder="Input 1st #"><br> What About Your Second Grade? <input type="text" id="2" placeholder="Input 2st #"><br> And Third? <input type="text" id="3" placeholder="Almost there 3rd #">
      </p>
      <button id="button" onclick="calculate()">Calculate</button>
      <button onclick="myFunction()">Reset</button>
    </div>
    <p>

      Calculated Grade: <span id="ans" style="color: green;"></span>

    </p>

    <div class="wrapper">

      <p> <span id="an" style="color: green;"></span> <span id="and" style="color: red;"></span></p>
    </div>


  </div>
  <script>
    function calculate() {
      var a = document.getElementById("1").value * 0.4;
      var b = document.getElementById("2").value * 0.4;
      var c = document.getElementById("3").value * 0.2;
      var grade = a + b + c;
      document.getElementById("ans").innerHTML = grade;
      if (grade < 70) {
        document.getElementById("and").innerHTML = "bad"
      } else if (grade >= 70) {
        document.getElementById("an").innerHTML = "good"
      }
    }

    function myFunction() {
      document.getElementById('and').innerHTML = '';
      document.getElementById("ans").innerHTML = '';
      document.getElementById("an").innerHTML = '';
    }
  </script>

</body>

</html>

＆＃13;

Answer 2

尝试此功能我希望它可以正常工作。

     function myFunction(){
       document.getElementById("1").value=0;
       document.getElementById("2").value=0;
      document.getElementById("3").value=0;
     document.getElementById('ans').innerHTML = "0";
     document.getElementById('and').innerHTML = '';
     document.getElementById('an').innerHTML = '';
      }

Answer 3

我建议将你的html更改为例如

<div id="thing">
    <legend class="legend">Average/Mean Calculator</legend>
    <form id="myForm">
        <p>
            What's Your First Grade?
            <input type="text" id="1" placeholder="Input 1st #" />
            <br/> What About Your Second Grade?
            <input type="text" id="2" placeholder="Input 2st #" />
            <br/> And Third? 
            <input type="text" id="3" placeholder="Almost there 3rd #" />
        </p>
        <button id="button">Calculate</button>
        <button onclick="myFunction()">Reset</button>
    </form>
    <div class="answer">
        <p>Calculated Grade: 
            <span id="ans" style="color: green;"></span>
        </p>
        <div class="wrapper">
            <p>
                <span id="an" style="color: green;"></span>
                <span id="and" style="color: red;"></span>
            </p>
        </div>
    </div>
</div>

然后您可以在javascript中使用表单重置，如下所示：

function calculate() {
    document.getElementById('myForm').reset();
}

如何让我的javascript表单重置按钮工作？

3 个答案: