Creating a form in html and Javascript solving a formula and getting the answer

Question

I need some help finishing the javascript for a form where users input numbers and the numbers are put into an equation and solved. I am pretty sure I have all of the HTML done correctly but the Javascript code is throwing me.

Any help in figuring this out is appreciated. I have hard time understanding Javascript all together.

function calculateMph() {
  var feet = document.getElementById("inputFeet").value; //distance in feet
  var time = document.getElementById("inputSeconds").value; //speed in seconds
  var mph = (45 * feet) / (22 * time); //the equation here

  document.write("<p>Your speed in mph is " + mph + "</p>");
}

<h1>Lab: Chapter Two</h1>
<h3>Fill in the form to determine your speed in miles per hour for a particular race that you ran:</h3>
<p><strong>MPH=(15f/22t) <br></strong>where f=distance run in feet and t is time in seconds.</p>
<form id="form">
  Distance in Feet(f):<input id="inputFeet" type="text" name="feet" required><br> Number of Seconds(t):<input id="inputSeconds" type="text" name="seconds" required><br><br>
  <input type="button" onclick="calculateMph()" value="Calculate" />
</form>
<p><b>Your speed in MPH:</b><br>
  <span id="result"></span>
</p>

NEVER use document.write after the page has loaded. It will wipe the page. Instead update the span: `document.getElementById("result").innerHTML=mph.toFixed(2);` — mplungjan, Jan 24 '18 at 14:03
Also have a read of this: https://stackoverflow.com/questions/1458633/how-to-deal-with-floating-point-number-precision-in-javascript — mplungjan, Jan 24 '18 at 14:06
Thank you! I see where I went wroing there. Im in school now and this is all new to me. Would i only use document.write if I put the java code in the script tags of html? — Murphy Parish, Jan 24 '18 at 14:13
https://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java — mplungjan, Jan 24 '18 at 14:14
You can use document.write ONLY inline, e.g. WHILE the page is loading — mplungjan, Jan 24 '18 at 14:14
Feel free to delete the question since it is only of real value to you. — mplungjan, Jan 24 '18 at 14:16
It wont let me delete it. Maybe it will be of help to someone else in the same boat as me. Thanks again. — Murphy Parish, Jan 24 '18 at 14:37

score 0 · Answer 1 · answered Jan 24 '18 at 14:06

Just change your code

document.write("<p>Your speed in mph is " + mph + "</p>");

with this

document.getElementById("result").innerHTML = mph.toFixed(2);

function calculateMph() {
  var feet = document.getElementById("inputFeet").value; //distance in feet
  var time = document.getElementById("inputSeconds").value; //speed in seconds
  var mph = (45 * feet) / (22 * time); //the equation here

  document.getElementById("result").innerHTML = mph.toFixed(2);
}

<h1>Lab: Chapter Two</h1>
<h3>Fill in the form to determine your speed in miles per hour for a particular race that you ran:</h3>
<p><strong>MPH=(15f/22t) <br></strong>where f=distance run in feet and t is time in seconds.</p>
<form id="form">
  Distance in Feet(f):<input id="inputFeet" type="text" name="feet" required><br> Number of Seconds(t):<input id="inputSeconds" type="text" name="seconds" required><br><br>
  <input type="button" onclick="calculateMph()" value="Calculate" />
</form>
<p><b>Your speed in MPH:</b><br>
  <span id="result"></span>
</p>

score 0 · Answer 2 · answered Jan 24 '18 at 14:08

0

you didn't specify to where to print the result and document.write result by clearing page

function calculateMph() {
  var feet = document.getElementById("inputFeet").value; //distance in feet
  var time = document.getElementById("inputSeconds").value; //speed in seconds
  var mph = (45 * feet) / (22 * time); //the equation here

  document.getElementById("result").innerHTML= mph ;
}

<h1>Lab: Chapter Two</h1>
<h3>Fill in the form to determine your speed in miles per hour for a particular race that you ran:</h3>
<p><strong>MPH=(15f/22t) <br></strong>where f=distance run in feet and t is time in seconds.</p>
<form id="form">
  Distance in Feet(f):<input id="inputFeet" type="text" name="feet" required><br> Number of Seconds(t):<input id="inputSeconds" type="text" name="seconds" required><br><br>
  <input type="button" onclick="calculateMph()" value="Calculate" />
</form>
<p><b>Your speed in MPH:</b><br>
  <span id="result"></span>
</p>

answered Jan 24 '18 at 14:08

jasinth premkumar

1,430
1
12
22

Oh I see where I went wrong! I appreciate it. Just to be clear, would I only need document.write if I use it inside the script tags in the html document? – Murphy Parish Jan 24 '18 at 14:12
no , please refer this https://www.w3schools.com/jsref/met_doc_write.asp – jasinth premkumar Jan 24 '18 at 14:14
Thanks for your help! – Murphy Parish Jan 24 '18 at 14:15
Please note that this is almost identical to https://stackoverflow.com/a/48424413/295783 which is a better answer and happens to be identical to my comment – mplungjan Jan 24 '18 at 14:16

Creating a form in html and Javascript solving a formula and getting the answer

2 Answers2