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

我从用户那里收集了一个变量，一个人名，并将其存储在一个变量中。当我点击next时，我想在几个不同的位置显示名称，包括一个下拉列表。我可以让它在下拉列表之外显示名称，但只能显示一次

这是我的html：

收集信息

<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>

学生姓名

我的下一个按钮

显示信息

<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>

---

我不知道这是否有用。但是在表格之间，我所做的就是隐藏它们。不确定我是否需要将它们放在单独的html页面上。

您只得到第一个

孩子的名字，而不是全部。您需要循环函数的结果
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;
    }
};

函数nextForm（）{
var nameInput=document.getElementById（“dynameInput”）.value；
var x=document.getElementsByClassName（“孩子的名字”）；
对于（变量i=0；i
看起来您只是在索引0（第一个索引）上显示变量

执行getElementsByClassName时，它返回一个类似数组的对象

因此，在您的代码中，您有：


document.getElementsByClassName（“孩子的名字”）[0].innerText=nameInput成功了。我唯一需要改变的是I=0，而不是I=o。然后它成功了。非常感谢你！你的问题被删除了：不，没有其他内容，这是完全基本的功能。示例：或使用
size
查看所有选项：