Рефакторинг вложенных прослушивателей событий?

Question

У меня есть такая викторина, которая проходит через серию вопросов, на которые пользователи отвечают да или нет. С каждым щелчком следующий вопрос заменяет внутренний текст, и в зависимости от ответа «аватар» пользователя на странице перемещается на определенное расстояние.

Прямо сейчас единственный способ заставить его работать - это вложить прослушиватели событий и жестко их закодировать, но я знаю, что это не лучшая практика, и безуспешно пытался его реорганизовать.

Кто-нибудь знает, как этого добиться?

Answer 1

const questions = [ "question1", "question2", "question3", "question4", "question 5"]
const text = document.querySelector('div.container')
const answer = document.querySelector("div.buttons")
const circle = document.querySelector("div.circle")

//questions will then begin
  
  const yesButton = document.querySelector("button.yes")
  const noButton = document.querySelector(".no")

var currentQuestion = 0;

answer.addEventListener('click', function(){
    if (event.target.value == 1){
        circle.style.transform = ( window.getComputedStyle(circle, null).getPropertyValue("transform").replace("px", "") + 40 ) + "px"
    }

    if (currentQuestion <= questions.length) text.innerHTML = questions[currentQuestion++];
});

Я думаю, что-то вроде этого

он устанавливает преобразование круга на его значение плюс 40 пикселей, и если текущий вопрос меньше или равен длине вопросов, он показывает вопрос.

Пожалуйста, проверьте это и скажите, работает ли он.