javascript - 如何在单击按钮时调用随机函数？

Question

这里是项目目标的快速背景:我正在尝试构建一个简单的数学游戏，当您单击一个按钮时它会提供随机数学问题。稍后，我会想办法检查答案是否正确。我通过创建一个输入表单开始这个过程。

我正在尝试使用 HTML 中的按钮调用 javascript 数组中的随机函数。该按钮调用一个随机函数，该函数在我刷新页面时决定。刷新页面后，随机选择一个函数，按钮继续一遍又一遍地给出该函数的结果。如果我刷新页面，按钮只会调用不同的函数。

我更愿意在每次单击按钮时让按钮调用数组中的随机函数。有人知道我怎样才能做到这一点吗？

这是我的代码:

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

将其包装在另一个函数中，每次点击发生时选择一个随机函数。

此外，您的函数不使用 params，因此不需要。

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>