Почему не работает калькулятор?

Question

[War4]

Не могу понять почему не работает код. Ошибок нету. При нажатии на кнопку "Вычислить" страница просто перезагружается.

https://codepen.io/dusiv_2004/pen/jOKyVQg

Comments

[Pavel]

Да у вас там ошибок туча, проще сжечь

Answer 1

[Nekio]

Ошибки:
1) убрать стандартную отправку, поставив: e.preventDefault();
2) неправильные классы (указано: {firstNumder, secondNumder}, а в html: {firstNumber, secondNumber})
3) Переменная operation в которой указан value математической операции выдает null
4) Параметры функции записаны объектом, а нужно просто передавать 3 параметра: (

- calculate({ num1, num2, operation })
+ calculate(num1, num2, operation)

)
5) В функцию calculate() передаете value переменной operation, но не вызываете, вместо этого вызываете OPERATIONS, а нужно именно operation

- switch (OPERATIONS)
+ switch (operation)

Comments

[Вадим]

<code lang="diff">
- удалить
+ добавить
</code>

- удалить
+ добавить

[Nekio]

Вадим, Благодарю

[War4]

Спасибо большое, все пофиксил, но так и не понял на счёт 3-его поункта

[Nekio]

War4, в codepen переменная operationList выдавала null в консоль. Если селектор исправен, то значит все должно работать

[War4]

Nekio, да, он выдает null. Из за чего это может быть?
Я же указал value в форме.

[Nekio]

War4, у вас аттрибут class в html не через английскую букву "c" написан, из-за этого выдаёт null

[War4]

Nekio, это я тоже пофиксил) все равно null

[Nekio]

War4, пофиксили и немного новых ошибок добавили. В итоге ваша часть кода будет выглядеть так:

const OPERATIONS = {
  addition : '+',
  substract : '-',
  multiplication : '*',
  division : '/',
  exponentiation: '**'
}

function calculate(num1, num2, operation){
  let result = 'null';
  switch (operation){
    case OPERATIONS.addition:
      result = addition(num1, num2);
      break;
      
    case OPERATIONS.substract:
      result = substract(num1, num2);
      break;
      
    case OPERATIONS.multiplication:
      result = multiplication(num1, num2);
      break;
      
    case OPERATIONS.division:
      result = division(num1, num2);
      break;
      
    case OPERATIONS.exponentiation:
      result = exponentiation(num1, num2);
      break;
      
    default:
		break;
  }
  return result;
}

const firstNumber = document.querySelector(".first-number");
const secondNumber = document.querySelector(".second-number");
const operationList = document.querySelector(".operation");
const btnResult = document.querySelector(".btn-result");
const outputNumber = document.querySelector(".output");

btnResult.onclick = function(evt){
    evt.preventDefault();
    const num1 = Number(firstNumber.value);
    const num2 = Number(secondNumber.value);
    const operation = operationList.value;
    const result = calculate(num1, num2, operation);
    outputNumber.innerHTML = ("Результат " + result);
};

Можете заменить на то что имеется и всё будет работать