如何在頁面上多次顯示我的js變量

Question

我從用戶，人名中收集了一個變量，並將其存儲在變量中。 當我單擊下一步時，我想在幾個不同的位置顯示名稱，包括一個下拉列表。 我可以將其顯示在下拉列表之外，但只能顯示一次。

這是我的html：

收集信息

<label>Student Name</label> <input type="text" name="Student Name" id="kidNameInput">

我的下一個按鈕

<input type="button" value="Next" class="button" onclick="nextForm()"></input>

顯示信息

<label>What did the student do well?</label>
 <div class="custom-select">
   <select name="did-well">
        <option value="0"><span class="kid-name"></span> did a great job at…</option>
        <option value="1"><span class="kid-name"></span> did this…</option>
        <option value="2"><span class="kid-name"></span> did something else…</option>
        <option value="3"><span class="kid-name"></span> was good…</option>
    </select>

這是我的JavaScript：

function nextForm() {
    var nameInput = document.getElementById("kidNameInput").value;
    document.getElementsByClassName("kid-name")[0].innerText = nameInput;

}

我不知道是否有幫助。 但是在表格之間，我要做的就是隱藏它們。 不知道我是否需要將它們放在單獨的html頁面上。

Answer 1

您只會得到第一個kid-name而不是全部。 您需要循環執行功能getElementsByClassName的結果

function nextForm() {
    var nameInput = document.getElementById("kidNameInput").value;
    var x = document.getElementsByClassName("kid-name");
    for (var i = 0; i < x.length; i++) {
        x[i].innerText = nameInput;
    }
};

Answer 2

看起來您只在索引0（第一個索引）上顯示變量。

當執行getElementsByClassName時，它將返回一個類似於object的數組。

因此，在您的代碼中，您擁有：

 document.getElementsByClassName("kid-name")[0].innerText = nameInput; 

您應該嘗試類似的方法：

 let arr = document.getElementsByClassName("kid-name"); for(let i=o; i<arr.length; i++) { arr[i].innerText = nameInput }