时间戳

首页 > 解决方案 > 如何在页面上多次显示我的 js 变量

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

问题描述

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

这是我的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…&lt;/option>
        <option value="1"><span class="kid-name"></span> did this…&lt;/option>
        <option value="2"><span class="kid-name"></span> did something else…&lt;/option>
        <option value="3"><span class="kid-name"></span> was good…&lt;/option>
    </select>

这是我的javascript：

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

}

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

标签： javascript

解决方案

你得到的只是拳头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;
    }
};

推荐阅读