单击按钮时如何添加事件监听器来显示文本框？

-3

我正在申请创建调查问题。基本上，用户通过输入问题名称添加问题，然后添加一种答案，可以是简答题或多项选择题。单击按钮时如何添加事件监听器来显示文本框？

每次按下添加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>

来源

2017-10-09 M.Ng

'name'不是'id'。另外，'input'不能有HTML，你必须将新创建的元素附加到其他现有的元素。 – Teemu

您没有标识符为“answer”的元素，因此'document.getElementById（“answer”）'没有找到将单击事件附加到的元素。 'getElementById（“answer_input”）相同'您可以使用'getElementsByName（）'，然后迭代每个元素。 – Nope

我改变了方法getElementsByName但它仍然不工作？还有什么不对吗？ –

我改变了按钮有各自的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>

来源

2017-10-09 10:53:24 davidchoo12

嗯，这似乎并没有为我工作。其实我的坏，它的工作 –

嘿，我也想知道，如果我想获得输入到创建的额外文本框中的项目，我将如何参考创建的每个输入字段？它被称为输入吗？但是有多种输入？ –

每个生成的输入都具有唯一的名称属性，因此您可以通过名称来引用它们。换句话说，您可以执行'document.getElementsByName（“answer1”）[0]'来获得第一个生成的输入。如果你想遍历输入，我建议你为生成的输入添加一个类名，然后循环遍历'document.getElementsByClassName（“generatedInputs”）' – davidchoo12

尝试了这一点：

<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”你的元素，然后添加事件侦听器，您可以使用“隐藏”在需要时属性为隐藏和显示元素。

来源

2017-10-09 10:57:04 Harman

如果您可以使用一些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");});

这将解决您的issue.Also确保您添加的ID，这样您就可以使用getElementById方法。

来源

2017-10-09 11:03:38

单击按钮时如何添加事件监听器来显示文本框？

回答

相关问题