動的に変わる変数を常に監視しながらinputタグのvalueにセットしたい

Question

html、js初心者です。
恐縮ですが質問の仕方が悪かったらどのような情報があると回答しやすいのかを明示してくれると幸いです。

<script>
 var test = 0;
</script>

<input type="text" value=""/>

どちらもhtmlファイル内に記述しています。

変数testは動的に変わると仮定します。
この時、testの値を常にvalueに代入するためにはどのようにすると良いのでしょうか？

※特に変数の保持はhtmlファイルのみでしたいというわけではありません。
変数の保持の仕方が他にわからない為、このような質問をしました。
違う変数の保持の方がvalueに代入しやすいという回答も受け付けます。

Answer 1

環境がないので、未検証。
アルゴリズムを参考にして下さい。

<input type="text" value="0" />
<script>
'use strict';
function sample (element) {
  return Object.create(null, {
    value: {
      get: () => element.value,
      set: (v) => element.value = v
    }
  });
}

const test = sample(document.querySelector('input'));

test.value = 1;
</script>

Re: Ceratophrys さん

Comments

[L85A2]

アルゴリズムはよくわかりませんでしたorz
オブジェクトを参照することにより値が変わってもhtmlに反映されるという事なのでしょうか？

[think49]

getter/setterを使用しています。既存の回答全てが同様だと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create

IE8以下ということですが、バージョンはどこまでですか。
IE8なら、ダミーの要素ノードを使って、definePropertyが使用可能。
IE7以下ならgetter/setterが使用不可能なので、要件を変える他、ないですね。

Answer 2

Javascriptの変数を常に監視して、HTMLに反映させるのであれば Vue.jsを試してみてはいかがでしょうか？

vue.js ガイド

上記のガイドにもありますが、HTML側に {{ }} で囲んだ中に変数名を指定して
Javascript側の変数 message の値を変えることで vue.js がリアルタイムにHTMLに反映してくれます。

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Javascriptで以下のように変数の値を変えれば反映できるイメージです。

app.messgae = 'Good Morning Vue!';

Comments

[L85A2]

Vue.js 初めて聞きました処理としては重くはないのでしょうか？

[Spade]

https://qiita.com/yaaah93/items/5a80367928b86f444f39
この記事にあるように、かなり軽快に動きますよ。
規模が大きくなると設計など考えなくてはいけませんが、今回のように狭い範囲で使うのであれば動作の重さは問題ないかと思います。

[L85A2]

解説ありがとうございます。
IE8以下だと動かないんですね。

[Spade]

IE8以下を対応する必要があれば他の選択肢を考えないとですね・・・

Answer 3

objectのプロパティにして、セッタで処理するとか・・

function createTest(){
  var test=0;
  Object.defineProperty(this,"test",
  {
    configurable:true,
    enumerable:true,
    get:function(){return test;},
    set:function(newVal){test=newVal;document.querySelector('#debug').value=newVal;}
  });
}
var obj=new createTest();
setInterval(function(){obj.test=Math.random()},1000);

※修正しました。IEなら9以上で動きます。
IE8以下はもっとローレベルのjsなのでオブジェクトからのアプローチは
キビシイでしょうね