javascript - 如何在不刷新页面的情况下将 <input number> 对象中输入的值传输到 javascript 中？

Question

我在不刷新页面的情况下将值从对象传输到 JavaScript 时遇到问题。我注意到，如果我的页面刷新，我的值(value)就会消失。

Fiddle example:

http://jsfiddle.net/pcgy3/185/

有人可以帮我解决这个问题吗？预先感谢您:)

Answer 1

从技术上讲，您不需要表单，您可以只拥有自己的元素。这能回答您的问题吗？

HTML:

Value(between 1 and 20):
<input  type="number" id="num_of_balls" min="1" max="20">
<button id="clickBTN">Click</button>

JS:

function onClick() {
  var ballCount = parseInt(document.getElementById("num_of_balls").value, 10);
  if(ballCount < 1 || ballCount > 20) return; // it have to be value between 1 and 20 to continue 
  var i = 0;

  alert("#Balls: " + ballCount);
  for (i = 0; i < ballCount; i++) {
    obj_t.push({
      xPos : 10 + 10 * i,
      yPos : 10 + 11 * i,
      xVel : 0 + i / 10,
      yVel : 1 + i / 10,
      r : 2 + i / 5
    });
  }
}

var obj_t = [];
var btn = document.getElementById("clickBTN");
btn.addEventListener("click", onClick);
document.getElementById("num_of_balls").addEventListener("keypress", (evt) => {
  if(evt.key === "Enter") {
    onClick();
  }
});