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这样的数组。

所以在您的代码中：

＆＃13;

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

＆＃13;

你应该尝试类似的事情：

＆＃13;

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

＆＃13;

如何在页面上多次显示我的js变量

2 个答案: