Попытка получить доступ к калькулятору HTML с функцией более высокого порядка и обратными вызовами

Question

Я работал над вызовами w3 и думал, что смогу написать решение лучше, чем они предоставили.

Я хотел подчиняться принципам СУХОЙ, поэтому я создал обратный вызов для деления и один для умножения и сделал функцию принципа HOF для каждого обратного вызова. Однако по какой-то причине это не работает и не выдает ошибку. Я пересмотрел свой код, и до сих пор не повезло, что его удалось решить.

В идеальном мире входные данные HTML будут умножать или делить код. Пока ничего не происходит.

Есть идеи?

var userMultiply = function() {
  document.getElementById("result").innerHTML = num1 * num2;
}

var userDivide = function() {
  document.getElementById("result").innerHTML = num1 / num2;
}

function userMaths(callBack) {
  let num1 = document.getElementById('firstNumber').value;
  let num2 = document.getElementById('secondNumber').value;
}

<form>
  1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
  <input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
  <input type="button" onClick="userMaths(userDivide)" Value="Divide" />
  <p>The result is: </p>
  <span id="result"></span>
</form>
</body>

Answer 1

Несколько проблем:

1. Вы никогда не вызываете обратный вызов.
2. Переменные num1 и num2 являются локальными переменными в userMaths, к ним нельзя получить доступот userMultiply и userDivide.Вы должны передать их как параметры.

Вам также следует преобразовать входные данные в числа с помощью parseFloat().Такие операторы, как * и /, делают это автоматически, но при добавлении userAdd вы столкнетесь с проблемой, поскольку + будет выполнять конкатенацию строк вместо добавления.

Возможно, вы захотитепереместить код, отображающий результат, в userMaths, поскольку он одинаков для всех операций.

var userMultiply = function(num1, num2) {
  return num1 * num2;
}

var userDivide = function(num1, num2) {
  return num1 / num2;
}

function userMaths(callBack) {
  let num1 = parseFloat(document.getElementById('firstNumber').value);
  let num2 = parseFloat(document.getElementById('secondNumber').value);
  document.getElementById("result").innerHTML = callBack(num1, num2);
}

<form>
  1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br>
  <input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
  <input type="button" onClick="userMaths(userDivide)" Value="Divide" />
  <p>The result is: </p>
  <span id="result"></span>
</form>