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

html5 • • 问答 • 140 阅读

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

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

我希望每次单击按钮时都让按钮在我的数组中调用一个随机函数。有谁知道我怎么能做到这一点？

这是我的代码：

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">Press here for your first problem</button>
  <script src={% static 'js/game_logic.js' %}></script>
  <p>Your problem will appear here</p>
  <form action="">
    <input type="text" placeholder="Type your answer here">
  </form>
</div>
<div>
  <button type="button">Press here for your first problem</button>
  <script src={% static 'js/game_logic.js' %}></script>
  <p>Your problem will appear here</p>
  <form action="">
    <input type="text" placeholder="Type your answer here">
  </form>
</div>

回答

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

此外，您的函数不使用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]} =`);
}

以上是如何在单击按钮时调用随机函数？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容