Help with a function in java script
Tags: javascript, discuss, learning
Published: 2024-05-19 20:34:41

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 <select> box with the operators inside an <option>, the values being addition, subtraction, multiplication and division. Next to it a <button> called "Go" that calls the function onclick="startGame()" and a few instructions... all these wrapped inside a <div id="show">.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op65y47f5as405knyx57.png)

Once the button its clicked. It suppose to hide the <div id="show"> and display a <div id="hide"> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sumgf1ey9fvhfj6oq1qm.png)

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_**

<body>
<main id="math-page">
	<h2>Math Facts Practice</h2>
  <div id="show" style="display: block;">
    <div class="dropdown">
      <h4 id="select">Operation:</h4>
      <label for="operation"></label>
        <select name="operation" id="operation">
          <option value="addition">Addition</option>
          <option value="subtraction">Subtraction</option>
          <option value="multiplication">Multiplication</option>
          <option value="division">Division</option>
        </select>
      <button class="go" onclick="startGame()">Go</button>
    </div>
    <br>
    <div class="instructions">
      <ol>
        <li>
          Select operation.
        </li>
        <li>
          Press <span><strong>Go</strong></span>
        </li>
        <li>
          How many problems can you solve in 30 seconds?
        </li>
      </ol>
    </div>
  </div>

  <div id="hide" style="display: none;">
    <div id="choice">
      <p class="operation-selection">Selection</p>
      <p id="random-operation">RO</p>
      <p name="user-input" id="user-input"></p>
    </div>
    <div id="calc-keys"> 
        <button type="button" class="numbers">1</button>
        <button type="button" class="numbers">2</button>
        <button type="button" class="numbers">3</button>
        <button type="button" class="numbers">4</button>
        <button type="button" class="numbers">5</button>
        <button type="button" class="numbers">6</button>
        <button type="button" class="numbers">7</button>
        <button type="button" class="numbers">8</button>
        <button type="button" class="numbers">9</button>
        <button type="button" class="numbers">0</button>
        <button type="button" class="clear">CLEAR</button>
    </div>
    <br>
    <div id="results">
      <p id="score">Score:</p><p id="current-score"></p>
      <p id="time">Time left: </p><p id="countdown"></p>
    </div>
  </div>
</main>
</body>

**_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;
      }
	}   
}