javascript - 将 html 中的表单值分配给 javascript 变量

Question

我正在尝试一个使用 HTML 和 Javascript 的小项目。我编写了 3 个函数，并希望使用在表单中输入的 2 个值来调用它们来显示结果。

我似乎在让 Javascript 代码识别这两个值时遇到了困难。

如果有人能指出我做错了什么，我会很高兴？

这是我的项目...

//degrees to radians function
function degRad(deg) {
  var rad = ( Math.PI / 180) * deg;
  return rad;
}

//easting calcualtion function
function east(deg, dist) {
  var east = (Math.cos(degRad(deg)) * dist );
  return east;
}

// northing calculation functions
function north(deg, dist) {
  var north = (Math.sin(degRad(deg)) * dist);
  return north;
}

//calling functions and out putting the results
document.write("easting equals  " + east(document.getElementById("Ang"),document.getElementById("Dist")) + "<br>");

document.write("northing equals  " + north(document.getElementById("Ang"),document.getElementById("Dist")));

<!--This is the page elements to input the angle and distance-->

  <fieldset style="padding: 20px;">
	   <legend>Polar to Rectangular calculator</legend>
	    Angle: <input type="number" value="14" id="Ang" style="border: 1px solid;"/>
      Distance: <input type="number" value="10" id="Dist" style="border: 1px solid;"/>
      <input type="submit" value="Submit">
  </fieldset>

Answer 1

您必须获取元素的值，如下所示。

//degrees to radians function
function degRad(deg)
  {
  var rad = ( Math.PI / 180) * deg;
  return rad;
  }

//easting calcualtion function
function east(deg,dist)
  {
  var east = (Math.cos(degRad(deg)) * dist );
  return east;
  }

// northing calculation functions
function north(deg,dist)
  {
    var north = (Math.sin(degRad(deg)) * dist);
    return north;
  }

//CHANGES BELOW

//calling functions and out putting the results
document.write("easting equals  " + east(document.getElementById("Ang").value,document.getElementById("Dist").value) + "<br>");

document.write("northing equals  " + north(document.getElementById("Ang").value,document.getElementById("Dist").value));

<!--This is the page elements to input the angle and distance-->

  <fieldset style="padding: 20px;">
	   <legend>Polar to Rectangular calculator</legend>
	    Angle: <input type="number" value="14" id="Ang" style="border: 1px solid;"/>
      Distance: <input type="number" value="10" id="Dist" style="border: 1px solid;"/>
      <input type="submit" value="Submit">
  </fieldset>