JavaScript 文字を入力すると画面に反映される

JavaScriptの文字を入力すると画面に反映されるサンプルです。

---

サンプル

文字を入力してください 

入力された値 

 

---

上記サンプルのコード

<input type="text"  id="text1" maxlength="10" />
<p>入力された値 <span id="span1"></span></p>

<script>
    const text = document.getElementById("text1");
    text.addEventListener("input", function () {
        document.getElementById("span1").textContent = text1.value;
    });
</script>

inputイベントを監視し、入力内容が変わるたびに文字列が更新されます。

functionで呼び出す形でも実現可能です。

<input type="text"  id="text1" maxlength="10" />
<p>入力された値 <span id="span1"></span></p>

<script>
    const text = document.getElementById("text1");
    text.addEventListener("input", changeText1);

    function changeText1() {
        document.getElementById("span1").textContent = text.value;
    }
</script>