I’m working on a simple math quiz application using JavaScript, where users have to solve randomly generated math problems. I’ve written a function to handle the quiz logic and user interactions, but I’m encountering a few issues with resetting and re-generating the quiz.

  const firstPara = document.querySelector(".firstNumber");
  const operatorPara = document.querySelector(".operator");
  const secondPara = document.querySelector(".secondNumber");
  const buttonIt = document.querySelector(".answer");
  const inputAnswer = document.querySelector(".textanswer");
  const container = document.querySelector(".container");
  const answerGet = document.querySelector(".asnwerGet");
  const didit = document.querySelector(".didit");
  let randomOperator = ["*", "+", "-", "/"];
 
  const quastion = {
      firstNumber: Math.floor(Math.random() * 100),
      operator: randomOperator[Math.floor(Math.random() * randomOperator.length)],
      secondNumber: Math.floor(Math.random() * 100),
  };
  
  buttonIt.addEventListener("click", () => {
      firstPara.textContent = quastion.firstNumber;
      operatorPara.textContent = quastion.operator;
      secondPara.textContent = quastion.secondNumber;
      container.append(firstPara);
      container.append(operatorPara);
      container.append(secondPara);
  });

  answerGet.addEventListener("click", () => {
      const answer = calculation();
      if (inputAnswer.value == answer) {
          console.log(`You did it`);
          didit.textContent = `You did it! The answer is ${calculation()} !!!!!`;
          resetGame();
      } else {
          console.log(`Nice try`);
          console.log(`Answer is ${calculation()}`);
      }
  });

  function calculation() {
      if (quastion.operator === "-") {
          return quastion.firstNumber - quastion.secondNumber;
      } else if (quastion.operator === "*") {
          return quastion.firstNumber * quastion.secondNumber;
      } else if (quastion.operator === "+") {
          return quastion.firstNumber + quastion.secondNumber;
      } else if (quastion.operator === "/") {
          return +(quastion.firstNumber / quastion.secondNumber).toFixed(2);
      }
  }
      
  function resetGame() {
      firstPara.textContent = "";
      operatorPara.textContent = "";
      secondPara.textContent = "";    
      // Here should be a mechanism to generate a new question
  }
})();```

My goal is everytime i get correct answer quastion will reset automatically.
but i am always getting same quastion for some reason i think problem is at buttonIt function always appending same value but how will i converting them into random ones ?
I’m also using querySelector to select DOM elements and append them to the container, but I’d like to know if there’s a more efficient approach.
The calculation function correctly computes the result based on the operator, so I believe the core logic is functioning as expected.
Thank you!
I’ve cleared the text content of the display elements, but this does not automatically generate new question values.
I tried adding new random values directly inside the resetGame function but need advice on integrating this properly.
Any suggestions or improvements to address these issues would be greatly appreciated!