DEV Community

Rodrigo
Rodrigo

Posted on

Help with a function in java script

Hello, I'm a student, so as I'm still trying to grasp the concepts on event listeners I'm trying to solve a project that involves solving random math problems in 30 seconds and keeping a score to each correct answer. The initial stage of the project displays a box with the operators inside an , the values being addition, subtraction, multiplication and division. Next to it a called "Go" that calls the function onclick="startGame()" and a few instructions... all these wrapped inside a .

Image description

Once the button its clicked. It suppose to hide the

and display a which contains the Operation that was selected, the random operation, a focused input field to enter the answers, the calculator buttons to select or type your answers, the score count and the countdown timer. At time left=0, the game stops and displays the final results and a button to re-start the game again.

Image description

I'm getting confused on how to achieve this inside 1 function that gets called when the "Go" button gets clicked as there are different tasks to handled.

My main problem is syntax and how to add them inside the function (or maybe I need to do separate functions?)
Hope someone can shine some light...
I still haven't done the code to check if the answers are correct to add to the score and when the timer gets to 0 to display final results and a re-start button.

I did not include css as is not important to the question, just styling.

This is what I have so far:

HTML



Math Facts Practice




Operation:




Addition
Subtraction
Multiplication
Division

Go




  1. Select operation.
  2. Press Go
  3. How many problems can you solve in 30 seconds?




Selection


RO





1
2
3
4
5
6
7
8
9
0
CLEAR




Score:


Time left:





javascript

function startGame() {
let x = document.getElementById("hide");
let y = document.getElementById("show");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}

let randomNumA = Math.floor((Math.random() * 100) + 1);
let randomNumB = Math.floor((Math.random() * 100) + 1);

let sel = document.getElementById('random-operation');
sel.innerHTML = '<h4>Operation Selection</h4><p>' + randomNumA + operator + randomNumB + '</p>';

let countdown = 30;
const countdownInterval = setInterval(() => {
  countdown--;
  document.getElementById('time').textContent = `Time left:    ${countdown} seconds`;

  if (countdown === 0) {
    clearInterval(countdownInterval);
    document.write.getElementById('score') = 'score';
    document.write.getElementById('time') = 'countdown';
  }
}, 1000);

let operator = getElementsByTagName('option');
let result = document.getElementById('operation-selection');
if (operator.lenght >= 1) {
  let addition = operator[0];
  let subtraction = operator[1];
  let multiplication = operator[2];
  let division = operator[3];
  if (operator == 'addition') {
    result = randomNumA + randomNumB;
  }
  else if (operator == 'subtraction') {
    result = randomNumA - randomNumB;
  }
  else if (operator == 'multiplication') {
    result = randomNumA * randomNumB;
  }
  else {
    result = randomNumA / randomNumB;
  }
}   

}

Top comments (0)