將我的輸入值輸入到 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>`;