HTML 输入总是返回 0

Question

let form = document.getElementById("info");
var angle = Number(form.angle.value);
alert(angle);
var power = 0.01;
var canvas = document.getElementById("canvas");
var dc  = canvas.getContext("2d");
var mgnt = canvas.getContext("2d");
//then angle anf power values goes into another function

<form id="info">
   Power:<br>
  <input type="number" name="power" id="power"><br>
   Angle:<br>
  <input type="number" name="angle" id="angle"/>
  <input type="submit" value="Submit"/>
 </form>

我的问题是，无论我给出的输入警报给我0。如果我给出带减速的角度输入（var angle = 30;）而不是html输入，一切都会正常。有什么问题

谢谢大家，我修好了:)

Answer 1

您需要动态地获取更改或

"submit"

事件

的值

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

let form = document.getElementById("info");

form.addEventListener("submit", function (e) {

  // Don't submit form! (Remove this line later - so you can submit! ;))
  e.preventDefault();
  
  var angle = Number(form.angle.value);
  alert( angle )

});

Enter an angle and hit SUBMIT

<form id="info">
  Power:<br>
  <input type="number" name="power" id="power"><br> 
  Angle:<br>
  <input type="number" name="angle" id="angle" />
  <input type="submit" value="Submit" />
</form>

你的 JS 是同步的，即立即（如果可能）从上到下执行。当时没有分配者也没有输入值。相反，在

submit

上，您可以检查该元素值！或者也关于

<input>

的

"input"

事件：

const angle = document.getElementById("angle");

angle.addEventListener("input", function () {
  
  const val = Number( this.value );
  console.log( val );
  // do someting smart with #angle's val

});

Enter an angle and watch it happen ;)

<form id="info">
  Power:<br>
  <input type="number" name="power" id="power"><br> 
  Angle:<br>
  <input type="number" name="angle" id="angle" />
  <input type="submit" value="Submit" />
</form>

Answer 2

现在您正在尝试立即获取表单值。

表单提交后获取表单值。

form.onSubmit = function() {
  var angle = Number(form.angle.value);
  // rest of the logic
}