Как убрать вывод NAN и 0?

Question

[Smirator]

При вызове функции и наличии пустых значений в result и surface-area выходит 0 и NAN.
Как реализовать отмену данного вывода? То-есть, если в поле не введены данные, у него появляется класс empty и в result и surface-area остается значение по умолчанию: "Введите значение".
Я попытался сделать это через

if(inputs.classList.contains('empty')) {
          return false;
    }

Получилось, но калькулятор перестал функционировать и консоль выдает ошибку.
Как реализовать это правильно? Подскажите, пожалуйста.
Благодарю!

document.getElementsByClassName('calculator-block-btn')[0].addEventListener('click', calculateThis);

function calculateThis() {
    let inputs = document.querySelectorAll('.calculator-value');
    let height = Number(document.getElementById('height').value);
    let heightValue = Number(height);

    let width = Number(document.getElementById('width').value);
    let widthValue = Number(width);

    let length = Number(document.getElementById('length').value);
    let lengthValue = Number(length);

    let amount = (document.getElementById('amount').value);
    let amountValue = Number(amount);

    let wordsEmpty = 'Введите значения';
    let wordsResult = '  шт. бруса';
    let wordsSurfaceArea = ' общая площадь, м²';


    inputs.forEach((el) => {
      if(!el.value) el.classList.add('empty');
      else
        el.classList.remove('empty');
    }
  )
        if(inputs.classList.contains('empty')) {
          return false;

    }

      function payment() {
        return (1 / ((widthValue * heightValue * lengthValue) / 1000000000)) * amountValue;
      }

      function surfaceArea() {
        return ((heightValue * widthValue * 2) + (heightValue * lengthValue * 2) + (widthValue * lengthValue * 2)) / 1000000 * amount;
      }

      document.getElementById('result').innerHTML = (payment()).toFixed(3) + wordsResult;
      document.getElementById('surface-area').innerHTML = (surfaceArea()).toFixed(1) + wordsSurfaceArea;

    }

Answer 1

[danila_egorenko]

Вы можете реализовать валидацию на undefined или использовать isNaN() до вывода результата, чтобы перехватить управление таким поведением.

Answer 2

[Чипекве]

document.querySelector('.calculator-block-btn').addEventListener('click', calculateThis);

function calculateThis() {
  const inputs = [...document.querySelectorAll('.calculator-value')];

  const getNumValue = (inputName) => Number(document.querySelector(`#${inputName}`).value);
  const [heightValue, widthValue, lengthValue, amountValue] = ['height', 'width', 'length', 'amount'].map(name => getNumValue(name));

  inputs.forEach((input) => input.classList.toggle('empty', !Number(input.value)));
  
  const isInvalidAmounts = inputs.some(input => input.classList.contains('empty'));
  const payment = () => (1 / ((widthValue * heightValue * lengthValue) / 1000000000)) * amountValue;
  const surfaceArea = () => ((heightValue * widthValue * 2) + (heightValue * lengthValue * 2) + (widthValue * lengthValue * 2)) / 1000000 * amountValue;

  document.getElementById('result').innerHTML = isInvalidAmounts ? 'Введите значения' :  payment().toFixed(3) + '  шт. бруса';
  document.getElementById('surface-area').innerHTML = isInvalidAmounts ? 'Введите значения' : surfaceArea().toFixed(1) + ' общая площадь, м²';
}