Question

我没有在没有页面刷新的情况下将值从对象传输到javascript的问题。我注意到，如果我的页面刷新，我的价值就会消失。

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();
  }
});

Answer 2

您可以监听输入更改：

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    obj_t=[];
    for (var i = 0; i <   document.getElementById('num_of_balls').value; i++) {
        var obj = {
            xPos : 10 + 10 * i,
            yPos : 10 + 11 * i,
            xVel : 0 + i / 10,
            yVel : 1 + i / 10,
            r : 2 + i / 5
        }
        obj_t.push(obj);
    }

  console.log(obj_t);
});

http://jsfiddle.net/pcgy3/188/

Answer 3

很明显，除非您将值存储在cookie，会话，本地存储或数据库中的某个位置，否则在重新加载页面后，对DOM的更改都不会保留一次。

虽然这是一个在JS中获取值的示例。我使用JQuery .keyup作为将触发

值的事件

<强> HTML：

<html>
<head>
<script>
function conversion(n)
{
  <!--if(n<=1) return 1;-->
  return n/0.62137;
}

function conversionTable(range)
{
  divStr="<table border=1><tr><td>Miles</td><td>Kilometres</td></tr>";
  for(i=0;i<=range;i++)
    divStr+="<tr><td>" + i + "</td><td>" + conversion(i) + "</td></tr>";
  document.getElementById("divResult").innerHTML=divStr;
}

function getnputValue()
{
  return document.getElementById("rangeTxt").value;
}
</script>
</head>
<body>
<p>
    Start : <input type=textbox id=rangeTxt value=""/>
    Finish : <input type=textbox id=rangeTxt2 value=""/>
    <br>
    <button onClick="conversionTable(getnputValue())">Press to get     result</button>
</p>
<div id="divResult">
</div>
</body>
</html>

<强> JS

<input  type="number" id="num_of_balls" min="1" max="20">

此处代码http://jsfiddle.net/pcgy3/189/

如何将<input number =“”/>对象中输入的值传输到javascript而不刷新页面？

3 个答案: