Question

我正在申请创建调查问题。基本上，用户通过输入问题名称然后添加一种答案类型来添加问题，答案可以是简答或多选。

每次按下添加MC答案按钮，我希望网页显示一个额外的文本框，用户可以在其中键入“答案文本”。当用户单击“添加简答”按钮时，不应显示文本框。这是我到目前为止所得到的。我如何修复我的代码？到目前为止，当我点击添加mc应答按钮并且我有一个用于输入答案的输入字段时，没有任何事情发生，但我不希望这个显示，除非点击该按钮。

document.addEventListener("DOMContentLoaded", function() {
  let num_answers = 0;
  document.getElementById("answer").addEventListener("click", function() {
    let elem = document.createElement("input");
    elem.name = "answer" + num_answers;
    document.getElementById("answer_input").appendChild(elem);
    num_answers++;
  });
});

<h1> Survey System </h1>
<form method="POST">
  <input name="question" placeholder="Enter a question" /><br/>

  <button type="button" name="answer" value="Add MC answer">Add MC answer</button><br>
  <input name="answer_input" placeholder="Enter an answer" /><br/>
  <button type="button" name="answer" value="Add short answer">Add short answer</button><br>

  <input type="radio" name="required" value="Mandatory">Mandatory<br>
  <input type="radio" name="required" value="Optional">Optional<br>
  <button type="submit" name="submit_question" value="Submit">Submit</button>
</form>

Answer 1

我将按钮更改为具有单独的ID。

document.addEventListener("DOMContentLoaded", function() {
  let num_answers = 0;
  let mcAnswer = document.getElementById("mcAnswer");
  mcAnswer.addEventListener("click", function() {
    let elem = document.createElement("input");
    elem.name = "answer";
    //document.getElementById("answer_input").appendChild(elem);
    // inserts elem after mcAnswer
    mcAnswer.parentNode.insertBefore(elem, mcAnswer.nextSibling);
    num_answers++;
  });
});

<h1> Survey System </h1>
<form method="POST">
  <input name="question" placeholder="Enter a question" /><br/>

  <button type="button" id="mcAnswer" value="Add MC answer">Add MC answer</button><br>
  <input name="answer_input" placeholder="Enter an answer" /><br/>
  <button type="button" id="shortAnswer" value="Add short answer">Add short answer</button><br>

  <input type="radio" name="required" value="Mandatory">Mandatory<br>
  <input type="radio" name="required" value="Optional">Optional<br>
  <button type="submit" name="submit_question" value="Submit">Submit</button>
</form>

Answer 2

试试这个：

    <html>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                let num_answers = 0;
                //Edit done here - changed to correct ID Name
                document.getElementById("answerMC").addEventListener("click", function () {
                    //Edit done here - added hidden attribute change on the input
                    document.getElementById("answerInput").hidden = false;
                    let elem = document.createElement("input");
                    elem.name = "answer" + num_answers;
                   document.getElementById("answer_input").appendChild(elem);
                    num_answers++;
                });
           });
       </script>
       <body>
           <h1> Survey System </h1>
           <form method="POST">
               <input name="question" placeholder="Enter a question"/><br/>

               <!-- Edit done here - added id to the button -->
               <button type="button" name="answer" id="answerMC" value="Add MC answer">Add MC answer</button><br>
               <!-- Edit done here - added id to the button -->
               <input name="answer_input" id="answerInput" placeholder="Enter an answer" hidden/><br/>
               <button type="button" name="answer" value="Add short answer">Add short answer</button><br>

               <input type="radio" name="required" value="Mandatory">Mandatory<br>
               <input type="radio" name="required" value="Optional">Optional<br>
               <button type="submit" name="submit_question" value="Submit">Submit</button>
           </form>
      </body>
   </html>

向元素添加'ids'，然后添加事件侦听器，您可以使用'hidden'属性在需要时隐藏和显示元素。

Answer 3

如果您可以使用一些css样式，那么您也可以使用样式属性display:none创建自定义类，您可以为文本框添加具有相同类名的类并写入单击事件功能，

document.getElementById("id of add short answer").addeventlistener("click",function(){document.getElementByClassName("class name of text boxes").addClass("class name given in styling");});

这将解决您的问题。还要确保添加ID，以便您可以使用getElementById方法。

如何在单击按钮时添加事件侦听器以显示文本框？

3 个答案: