在 html 和 Javascript 中创建表单解决公式并获得答案 [重复]

Question

我需要一些帮助来完成用户输入数字并将数字放入方程式并求解的表单的 javascript。我很确定我所有的 HTML 都正确完成了，但是 Javascript 代码让我失望了。

感谢任何帮助解决这个问题。我很难完全理解 Javascript。

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>

Answer 1

只需更改您的代码

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

有了这个

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>

Answer 2

您没有通过清除页面指定打印结果和 document.write 结果的位置

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>