重构嵌套事件监听器？

Question

我设置了这种测验，它会回答一系列问题，用户回答是或否。每次点击，下一个问题都会替换内部文本，并且根据答案，用户在页面上的“头像”会移动一定距离。

目前，我让它工作的唯一方法是嵌套事件侦听器并对其进行硬编码，但我知道这不是最佳实践，并且一直在尝试重构它，但没有任何运气。

有人对如何实现这一点有更好的了解吗？

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")



answer.addEventListener('click', function(){
    if (event.target.value == 1){
        circle.style.transform = ("translate(20px")
    }
    text.innerHTML = questions[0];
   

    
    answer.addEventListener("click", function(){
        if (event.target.value == 1){
            
            circle.style.transform = ("translate(60px")
          
        }
        text.innerHTML = questions[1] 
        answer.addEventListener("click", function(){
            if (event.target.value == 1){
                circle.style.transform = ("translate(100px")
             
            }
            text.innerHTML = questions[2] 
            answer.addEventListener("click", function(){
                if (event.target.value == 1){
                    circle.style.transform = ("translate(140px")
                  
                }
                text.innerHTML = questions[3] 
                answer.addEventListener("click", function(){
                    if (event.target.value == 1){
                        circle.style.transform = ("translate(180px")
                        
                    }
                    text.innerHTML = questions[4] 
                    answer.addEventListener("click", function(){
                        if (event.target.value == 1){
                            circle.style.transform = ("translate(220px")
                      
                    }
                    
                
                })
                })
                                    
        })
    }) }) })

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++];
});

我觉得是这样的

它将圆圈的变换设置为其值加上 40px，如果当前问题小于或等于问题长度，则显示问题。

请测试它并说它是否有效。