How can I make my javascript form reset button work?

Question

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>

Answer 1

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>

Answer 2

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

Answer 3

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();
}

How can I make my javascript form reset button work?

Question

3 answers

solution1
1 ACCPTED 2017-09-30 20:03:36

solution2
0 2017-09-30 20:13:08

solution3
0 2017-10-01 13:54:07

How can I make my javascript form reset button work?

Question

3 answers

solution1 1 ACCPTED 2017-09-30 20:03:36

solution2 0 2017-09-30 20:13:08

solution3 0 2017-10-01 13:54:07

solution1
1 ACCPTED 2017-09-30 20:03:36

solution2
0 2017-09-30 20:13:08

solution3
0 2017-10-01 13:54:07