为什么我的JavaScript表单无法正常工作？

Question

I have a form (im using bootstrap) with 3 number inputs and with the numbers im doing math, this is my code

 function abc() { var a = document.getElementById("a").value; var b = document.getElementById("b").value; var c = document.getElementById("c").value; var d = Math.pow((b), 2) - (4 * a * c); var x1 = (-b-(Math.sqrt(d))) / (2 * a); var x2 = (-b+(Math.sqrt(d))) / (2 * a); document.write(d); } 

 <div class="row"><!-- Row --> <div class="col-md-4"><!-- Rij links --> <form onsubmit="abc()" role="form"> <div class="form-group"> <label for="a">Vul hier a in:</label> <input type="number" class="form-control" id="a" placeholder="Ax2 + bx + c" > </div> <div class="form-group"> <label for="b">Vul hier b in:</label> <input type="number" class="form-control" id="b" placeholder="ax2 + Bx + c" > </div> <div class="form-group"> <label for="c">Vul hier c in:</label> <input type="number" class="form-control" id="c" placeholder="ax2 + bx + C" > </div> <button type="submit" class="btn btn-default btn-block">Ga!</button> </form> </div><!-- Einde Rij links --> <div class="col-md-4"><!-- Rij rechts --> <p>Je antwoord komt hieronder:</p> <p id="antwoord"></p> </div><!-- Einde Rij rechts --> <div class="col-md-4"> </div> </div><!-- Einde Row --> 

my javascript is right before the closing body tag.

at first the code worked but than suddenly it stopped working. it does nothing

Answer 1

The onsubmit function is not preventing the page from sending the request back to the server. Best practice is to return false at the end of the abc function:

 function abc() {
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;
  var c = document.getElementById("c").value;
  var d = Math.pow((b), 2) - (4 * a * c);
  var x1 = (-b-(Math.sqrt(d))) / (2 * a);
  var x2 = (-b+(Math.sqrt(d))) / (2 * a);
  document.write(d);

  return false;
}

You should also update the onsubmit as follows:

 <form onsubmit="return abc()" role="form">

Hope that helps!