javascript - 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。如果我给 Angular 输入减速(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>

在此输入验证码