javascript - 使用html表单更改没有jquery的java脚本字段

Question

我在此找到的所有内容都需要 jquery，但我想要一种方法，以便我可以在文本框和滑块中输入内容然后提交（最好不更改页面）并让表单数据修改 java 脚本变量而无需使用 jquery

Answer 1

您需要一个函数，该函数将使用用户在表单中提供的值来根据需要更新 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>

这种方式根本不会提交表单，即页面不会重新加载。<form>实际上，在这种情况下，您甚至不需要适当的。

Answer 2

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

通过数据属性使您的 HTML 输入元素命名为 jsvar，如下所示：

  <input data-jsvar="myvar" />

在您的 JS 中，将onChange处理程序放在这些输入元素上：

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

这巧妙地将 JS 与 HTML 分开，只需添加 html 元素即可轻松扩展。请参阅http://jsfiddle.net/jstoolsmith/zvhpc/上的演示