javascript - jqueryなしでHTMLフォームを使用してJavaスクリプトフィールドを変更する

Question

K これで見つけたものはすべてjqueryが必要ですが、テキストボックスとスライダーに入力して送信し（できればページを変更せずに）、jqueryを使用せずにフォームデータでJavaスクリプト変数を変更できるようにする方法が必要です

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 入力要素の名前を data 属性を介して 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/でデモを参照してください。