單擊按鈕時如何添加事件偵聽器以顯示文本框？
[英]How to add event listener to display textbox when button is clicked?
問題描述
我正在申請創建調查問題。 基本上，用戶通過輸入問題名稱然后添加一種可以是簡答或多項選擇的答案來添加問題。
每次按下添加 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>
3 個解決方案
解決方案1
1 2017-10-09 10:53:24
我將按鈕更改為具有單獨的 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>
解決方案2
0 2017-10-09 10:57:04
試試這個：
<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>
將“id”添加到您的元素，然后添加事件偵聽器，您可以在需要時使用“隱藏”屬性來隱藏和顯示元素。
解決方案3
0
如果您可以使用一些 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方法。
如果在事件偵聽器中單擊按鈕，如何獲取更新的 HTML？
[英]How to get the updated HTML if a button was clicked inside of an event listener?
當在Javascript中單擊子元素時，如何覆蓋父事件偵聽器？
[英]How to override a parent event listener when a child element is clicked in Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.