单击按钮后如何创建多个输入 (Javascript)

Question

我是 javascript 的新手，我正在尝试制作一个网络应用程序来测试用户并让他们进行测试。我目前专注于网络应用程序的制作测试部分。当用户输入测试名称和他们想要在测试中的问题数量时，他们单击按钮，然后应调用 javascript 函数，该函数具有一个循环，为他们输入的数字重复。在循环中，应创建一个 'question' 和一个 'answer' 输入。这是此功能的 html：

<h3>Enter the name of the test you want to make:</h3><br>
<input type="text" name="testname" id="testnameID">
<h3>Enter the number of questions you want the test to have:</h3><br>
<input type="text" name="numofquestions" id="numID">
<button type="button" onclick="createNewElement()">Let's make it!</button>

这是 javascript 中的函数 'createNewElement':

function createNewElement() {
    var testname = document.getElementById("testnameID").value;
    var numquestions = document.getElementById("numID").value;
    var numofquestions = parseInt(numquestions)
    
    for ( var i = 0; i < numofquestions; i++ ) {
        // This will loop the amount of times as the user input
        var questioninput = document.createElement("input");
        questioninput.type = 'text';
        questioninput.id = 'question' + i;
        var answerinput = document.createElement("input");
        answerinput.type = 'text';
        answerinput.id = 'answer' +i;
        
    }
}

根据我在网上阅读的内容，我认为这应该可行，但我写的内容一定有一些错误。非常感谢有关如何成功执行此操作的任何建议。

Answer 1

您需要 Template literals 方法来附加问题（您的输入字段到 DOM）

此外，您的 HTML 中需要一些 element，它将包含所有多个输入字段。

示例：

<div id="question-paper"></div>

上面的 div 将是你的 container 你可以 append n - 你想要的字段数。

function createNewElement() {
      var testname = document.getElementById("testnameID").value;
      var numquestions = document.getElementById("numID").value;
      var numofquestions = parseInt(numquestions)
      
      var questionAnswerHTML = "";
      for (var i = 0; i < numofquestions; i++) { 
         questionAnswerHTML += `
            <label for="question${i}">
               Question: ${i+1}
            </label>
            <br />
            <input type="text" 
                   id="question${i}"
                   placeholder="Type Question ${i+1} Here." />

           <br /><br />
           <label for="answer${i}">
               Answer: ${i+1}
           </label>
           <br />
           <input type="text" 
                  id="answer${i}" 
                  placeholder="Type Answer ${i+1} Here." />
           <br /><br />
       `;   
      } 
   document.getElementById("question-paper").innerHTML = questionAnswerHTML; 
}

<h3>Enter the name of the test you want to make:</h3>
<input type="text" name="testname" id="testnameID">

<h3>Enter the number of questions you want the test to have:</h3>
<input type="text" name="numofquestions" id="numID"> <button type="button" onclick="createNewElement()">Let's make it!</button>

<hr>
<div id="question-paper"> </div>

单击按钮后如何创建多个输入 (Javascript)

How do I create multiple inputs after a button is clicked (Javascript)

html

javascript

for-loop

user-input

button