CODEWITHSUNDEEP
javascripthtml
Kay
Kay

Reputation: 11

How can I make my javascript form reset button work?

I want to reset my value inputs, Calculated Grade and also getElementById("an"), getElementById("and"). I've been trying various different methods and nothing seems to work. I also tried using forms method and my code seems to crash.

please help!

I have the following code(everything works except for reset button):

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 = '';
  });
}
.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;
}
<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>

Upvotes: 1

Views: 2223

Answers (3)

Tapas
Tapas

Reputation: 1193

I would suggest to change your html to have a form for example

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

Then you can use form reset in javascript as follow:

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

Upvotes: 0

bhansa
bhansa

Reputation: 7524

Define your myFunction:

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

Add calculate as a function instead of adding onclick event listener to each button in page.

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

getElementById() only supports one name at a time and only returns a single node not an array of nodes. 

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

Upvotes: 1

Next Door
Next Door

Reputation: 69

Try this function I hope it May work.

     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 = '';
      }

Upvotes: 0

Related Questions