class - 对多个按钮事件监听器“单击”或 .onclick 使用相同的类 - 只会工作一次

Question

我是 javascript/初学者程序员的新手。我正在做一个测验，当点击答案时，它应该显示“正确”和下一步按钮或“不正确”。在点击回答按钮之前，页面上会隐藏正确/错误的内容。在按下下一个按钮之前，其他问题也会被隐藏 - 然后当前问题将被隐藏并显示下一个问题。

我试图对所有正确的按钮使用一个类，对所有不正确的按钮使用另一个类。我已经能够以多种方式使第一个问题起作用，但是一旦进入下一个问题，按钮就不再起作用。我假设它与事件侦听器或 onclick 只能运行一次有关？我已经搜索了互联网，其他问题的答案都说使用循环和 querySelectorAll，但它仍然只适用于我的第一个问题。我被困住了

HTML: 

  <div class="question" id = 'q1'>
        <p>Are snowflakes pretty?</p> <!--both correct-->
        <button class = 'correct'>Yes</button>
        <button class = 'correct'>No</button>

        
        <div class = 'correct_answer_block'>
            <p class='display_correct_answer'></p>
            <button class = 'next_button'>Next</button>
        </div>
        
    </div>

    <div class="question" id = 'q2'><p>What is her name?</p>
        <img src="mad_elf_imgs/elsa-resize.jpg">
        <button class = 'incorrect'>Anna</button>
        <button class = 'correct'>Elsa</button>
        <button class = 'incorrect'>Olaf</button>

        <div class = 'correct_answer_block'>
            <p class='display_correct_answer'></p>
            <button class = 'next_button'>Next</button>
        </div>        
        
        <div class = 'incorrect_answer_block'>
            <p class = "display_incorrect_answer"></p>
        </div>
        
    </div> 

CSS

#q2, #q3, .next_button {
    display: none;
}

JS - 注意不正确的逻辑尚未完成，将按照正确的逻辑建模

/*Correct Variables */
const class_correct = document.querySelectorAll("button[class^=correct]")
/*const class_correct = document.getElementsByClassName("correct")[0] */
const display_correct_answer = document.getElementsByClassName("display_correct_answer")[0]
const next_button = document.getElementsByClassName("next_button")[0]
const correct = document.getElementsByClassName("correct")


/*Incorrect Variables */
const class_incorrect = document.getElementsByClassName("incorrect")[0]
const display_incorrect_answer = document.getElementsByClassName("display_incorrect_answer")[0]

/*Correct Click */

function display_correct() {
    display_correct_answer.textContent = 'Correct!'   
    next_button.style.display = 'block'

}


for (let i = 0; i < class_correct.length; i++) {
    class_correct[i].addEventListener("click", display_correct) 

}

/* class_correct.forEach((correct_button) => {
    correct_button.addEventListener("click",display_correct)}) */

标签： classfor-loopbuttononclickevent-listener