Блог

Я совершенно новичок в javascript/начинающий программист. Я провожу тест, в котором при нажатии на ответ должно отображаться либо «Правильно» и кнопка «Далее», либо»Неправильно». Правильное/неправильное содержимое скрыто на странице до тех пор, пока не будет нажата кнопка ответа. Другие вопросы также скрыты до тех пор, пока не будет нажата следующая кнопка — затем текущий вопрос становится скрытым и отображается следующий вопрос.

Я пытаюсь использовать один класс для всех правильных кнопок и другой класс для всех неправильных кнопок. Мне удалось заставить первый вопрос работать различными способами, но как только он переходит к следующему вопросу, кнопки больше не работают. Я предполагаю, что это как-то связано с тем, что прослушиватель событий или onclick может запускаться только один раз? Я просмотрел Интернет, и в других ответах на вопросы говорилось, что нужно использовать цикл и запросы, но для меня это все еще работает только для первого вопроса. Я застрял

 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)}) */