How do I call a random function on button click?

Question

Here is a quick background on project goals: I'm trying to build a simple math game that provides random math problems when you click on a button. Later, I'll figure out a way to check whether the answers are correct. I started this process by creating an input form.

I'm trying to call a random function in a javascript array using a button in HTML. The button calls a random function that is decided when I refresh the page. Once I refresh the page, the a function is randomly selected and the button continues to give the results of that function over and over. The button only calls a different function if I refresh the page.

I would prefer to have the button call a random function in my array each time the button is clicked. Anybody know how I could achieve this?

Here's my code:

const btn = document.querySelector('#START')

const randomFunc = [
  multiplication,
  division,
  addition,
  subtraction,
]

btn.addEventListener(
  'click', randomFunc[Math.floor(Math.random() * randomFunc.length)]
)

function multiplication(params) {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 13);
  let problemResult = num1 * num2;
  console.log(num1, '*', num2, '=', problemResult);
  document.getElementById('mathProblem').innerHTML = (`${num1} * ${num2} =`);
}

function division(params) {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 12) + 1;
  let problemResult = (num2 * num1) / num2;
  console.log(num1, '/', num2, '=', problemResult);
  document.getElementById('mathProblem').innerHTML = (`${num1} / ${num2} =`);
}

function addition(params) {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 13);
  let problemResult = num1 + num2;
  console.log(num1, '+', num2, '=', problemResult);
  document.getElementById('mathProblem').innerHTML = (`${num1} + ${num2} =`);
}

function subtraction(params) {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 13);
  let numList = [num1, num2];
  numList.sort(function(a, b) {
    return b - a
  });
  let problemResult = numList[0] - numList[1];
  console.log(numList[0], '-', numList[1], '=', problemResult);
  document.getElementById('mathProblem').innerHTML =
    (`${numList[0]} - ${numList[1]} =`);
}

<div>
  <button type="button" class="btn btn-primary btn-lg" id="START">Press here for your first problem</button>
  <script src={% static 'js/game_logic.js' %}></script>
  <p id="mathProblem">Your problem will appear here</p>
  <form action="">
    <input type="text" placeholder="Type your answer here">
  </form>
</div>

Answer 1

Wrap it in another function that selects a random function each time the click happens.

Also, your functions don't use params, so it's not needed.

const btn = document.querySelector('#START')

const randomFunc = [
  multiplication,
  division,
  addition,
  subtraction,
]

btn.addEventListener(
  'click',
  function() {
    randomFunc[Math.floor(Math.random() * randomFunc.length)]();
  }
)

function multiplication() {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 13);
  let problemResult = num1 * num2;
  console.log(num1, '*', num2, '=', problemResult);
  document.getElementById('mathProblem').innerHTML = (`${num1} * ${num2} =`);
}

function division() {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 12) + 1;
  let problemResult = (num2 * num1) / num2;
  console.log(num1, '/', num2, '=', problemResult);
  document.getElementById('mathProblem').innerHTML = (`${num1} / ${num2} =`);
}

function addition() {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 13);
  let problemResult = num1 + num2;
  console.log(num1, '+', num2, '=', problemResult);
  document.getElementById('mathProblem').innerHTML = (`${num1} + ${num2} =`);
}

function subtraction() {
  let num1 = Math.floor(Math.random() * 13);
  let num2 = Math.floor(Math.random() * 13);
  let numList = [num1, num2];
  numList.sort(function(a, b) {
    return b - a
  });
  let problemResult = numList[0] - numList[1];
  console.log(numList[0], '-', numList[1], '=', problemResult);
  document.getElementById('mathProblem').innerHTML =
    (`${numList[0]} - ${numList[1]} =`);
}

<div>
  <button type="button" class="btn btn-primary btn-lg" id="START">Press here for your first problem</button>
  <script src={% static 'js/game_logic.js' %}></script>
  <p id="mathProblem">Your problem will appear here</p>
  <form action="">
    <input type="text" placeholder="Type your answer here">
  </form>
</div>