HTML-Javascript输入 - 计算 - 输出

时间:2016-04-10 01:27:40

标签: javascript html

我只需要添加一些文本框/表单来通过HTML从用户输入数据,并将它们转换为将运行计算的脚本中的变量,然后输出计算的答案。我有一些代码,但它不能正常工作。似乎单击提交按钮时,该函数不会被调用。任何帮助都会很棒:这里是代码。

<form id="frm1" action="form_action.asp">
  Initial Displacement: <input type="number" name="x"><br>
  Initial Velocity: <input type="number" name="v"><br>
  Acceleration: <input type="number" name="a"><br>
  Time Passed: <input type="number" name="t"><br>
  <input type="button" onclick="calc()" value="Submit"/>
</form>


<script>
function calc()
{

var b=document.getElementById("frm1");
document.write(b.element[0].value+b.element[1].value*b.element[2].value+(1/2)*b.element[3].value*b.element[2].value*b.element[2].value);
}
</script>

https://jsfiddle.net/zytyf16q/#&togetherjs=qABKDyLpK2

2 个答案:

答案 0 :(得分:0)

提交按钮的代码中存在错误类型。您的提交按钮应如下所示:

<!DOCTYPE html>
<html>
  <body>
  Initial Displacement:
  <input type="number" id="x" name="x">
  <br> Initial Velocity:
  <input type="number" id="v" name="v">
  <br> Acceleration:
  <input type="number" id="a" name="a">
  <br> Time Passed:
  <input type="number" id="t" name="t">
  <br>
  <input type="button" onclick="calc('x','v','a','t')"     value="Submit">
  </body>
  <script>
  function calc(x, v, a, t) {
   var Displace = parseInt(document.getElementById(x).value)
   var Velocity = parseInt(document.getElementById(v).value)
   var Acceleration = parseInt(document.getElementById(a).value)
   var Time = parseInt(document.getElementById(t).value)
   var calculations = Displace + (Velocity * Acceleration) + ((1 / 2) * Time * Acceleration * Time);
   alert(calculations)
  }

 </script>
 </html>

答案 1 :(得分:0)

我将id添加到输入中,然后使用document.getElementById选择它们并将它们保存到具有各自名称的变量中。然后我进行了计算。

&#13;
&#13;
<form id="frm1" action="form_action.asp">
  Initial Displacement: <input type="number" name="x" id="x"><br>
  Initial Velocity: <input type="number" name="v" id="v"><br>
  Acceleration: <input type="number" name="a" id="a"><br>
  Time Passed: <input type="number" name="t" id="t"><br>
  <input type="button" onclick="calc()" value="Submit"/>
</form>


<script>
function calc()
{
var x = document.getElementById('x').value
var v = document.getElementById('v').value
var a = document.getElementById('a').value
var t = document.getElementById('t').value
document.write(x+v*a+(1/2)*t*a*a);
}
</script>
&#13;
&#13;
&#13;