将我的输入值输入到 innerHTML 中的问题 - JavaScript

Question

我无法在提交时获得输入值以进入我的邀请。 按提交后，值被存储，因为我已经使用检查了我的数组中的值

document.getElementById("volunteersName" + index).value;

所有值都正确存储。

但是当我使用

document.getElementById("name" + index).innerHTML;

即使它们应该相等，它仍然显示为空，因为我已经使用

document.getElementById("name" + index).innerHTML = document.getElementById("volunteersName" + index).value;

请帮我看看我做错了什么。 谢谢

* 以下部分代码 *

HTML

    <section id="pageForm">
        <form action="#">
            <label for="numberOfVolunteers">Number Of Volunteers:</label>
            <input id="numberOfVolunteers" type="number" onkeypress = "event()" name="numberOfVolunteers" placeholder="Enter Number Of Volunteers" />
            <p id="newFields"></p>
            <br>
            <br>
            <input class="visibility" onclick="invite()" type="button" value="Submit">
        </form>
    </section>

    <div id="test">

    </div>
    <script type="text/javascript" src="js/main.js"></script>

JS

function invite() {
    var volunteersName = [];
    var name = [];
    for (index = 1; index < volunteersName.length; index++) {
            document.getElementById("name" + index).innerHTML = document.getElementById("volunteersName" + index).value;

    }
}

Answer 1

你在这里有几个问题：

• invite()循环内的代码将永远不会执行，因为index (1) 将始终大于volunteersName (0) 的长度
• 创建名称所在的跨度的语法是错误的。 如果要使用字符串插值，则需要在反引号内使用... id="name${index}" ...

对于第一个问题，我建议您使用第一个输入的输入值来设置 for 循环的关闭条件：

var numberOfVolunteers = document.getElementById("numberOfVolunteers").value;
for (index = 1; index <= numberOfVolunteers; index++) {

其次，您的代码应如下所示：

inviteForm.innerHTML = `Hello <span id="name${index}"> Volunteers Name </span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id='organizationName2'>Organizations Name</span> on <span id='eventDate2'>Event Date</span>. Please come to the following website: <span id='websiteURL2'>Website URL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id='hostName2'>Hosts Name</span>`;