Javascript 使用html表单在不使用jquery的情况下更改java脚本字段

K我在这上面找到的所有东西都需要jquery，但我想要一种方法，这样我可以在文本框和滑块中键入内容，然后提交它（最好不更改页面）并且让表单数据修改java脚本变量，而不必使用jquery。您需要一个函数，该函数将使用用户在表单中提供的值来根据需要更新JS变量。然后您只需要从按钮的

onclick

处理程序调用此函数：

<script>
    var myVarToUpdate = "test";

    function update() {
        // find the input element by ID and assign its value to `myVarToUpdate`
        myVarToUpdate = document.getElementById("someText").value;
    }
</script>

<form>
    <input id="someText" value="" />
    <button type="button" onclick="update()">Update</button>
</form>

var myVarToUpdate=“测试”；
函数更新（）{
//按ID查找输入元素，并将其值赋给'myVarToUpdate'`
myVarToUpdate=document.getElementById（“someText”）.value；
}
更新

---

这样就根本不会提交表单，即页面不会重新加载。实际上，在这种情况下，您甚至不需要合适的

。

除非您特别需要提交功能，否则您可以执行以下操作

将HTML输入元素命名为jsvar或数据属性，如下所示：

  <input data-jsvar="myvar" />

---

这将JS与HTML巧妙地分离开来，只需添加HTML元素即可轻松扩展。请参见位于

的演示，我应该将onsubmit事件/属性放在哪里？在我的示例中，

具有

onsubmit

属性。属性的内容基本上是JS代码。在本例中，它是对

update（）

函数的调用（以及防止表单提交的

return

语句）从按钮的

onclick

：

Update

。我已将示例更新为使用第二个变量

onclick

。

  function changeVar (ev) {
    var v = this.getAttribute ('data-jsvar');
    if (v && v in window) {
      window[v] = this.value;
      console.log (v + ' = ' + window[v]);  // for debug
    }
  }


  [].forEach.call (document.querySelectorAll ('[data-jsvar]'), function (inp) {
      inp.addEventListener ('change', changeVar, false);
      window[inp.getAttribute ('data-jsvar')] = inp.value; // optional init for var
  });