將輸入傳遞給 span 字段

Question

我正在嘗試將我從輸入中獲得的輸入傳遞到跨度字段。 我使用帶有結果的 api 下拉列表。 因此，如果人們點擊搜索結果，它會自動填充（很像谷歌）。 我想將此結果傳遞給我的頁面中的跨度字段。

但是，如果人們點擊結果，我不想要 onclick 事件。 而是當人們點擊輸入字段時..

這是我嘗試過的：

    <div>
        <input id="exercise-search" class="form-control" type="text" name="data">
    </div>
    <span id="namespan">Name</span>

和簡單的腳本：

        <script>

            var name = document.getElementById("exercise-search").value;
            document.getElementById("namespan").textContent=name;

            function reload(){
                var container = document.getElementById("namespan");
                var content = container.innerHTML;
                container.innerHTML= content;
            }
        </script>

但是我仍然需要手動刷新頁面才能看到結果。 我怎樣才能自動化這個？

Answer 1

將change事件的偵聽器添加到輸入字段。 這將在用戶編輯該字段並單擊它時執行。

document.getElementById("exercise-search").addEventListener("change", function() {
    var name = this.value;
    document.getElementById("namespan").textContent=name;
});