Как добавить класс элементам?

Question

[Smirator]

Необходимо добавить в калькуляторе, чтобы при незаполненном инпуте поле подсвечивалось и в графу результат не выходило NAN и 0.
Пробовал реализацию через добавление и удаление классов (для того, чтобы отметить, какой инпут не заполнен). Получилось, что добавляется только на один.
Подскажите, пожалуйста, как это сделать? Что упускаю из вида?

<form>
                              <p class="calculator-text-value">Высота бруса(мм)</p>
                              <input  id="height" class="calculator-value" list="height-value">
                               <datalist id="height-value">
                                  <option value="100">
                                  <option value="150">
                                  <option value="200">
                                  <option value="250">
                               </datalist>

                              <p class="calculator-text-value">Ширина бруса(мм)</p>
                              <input id="width" class="calculator-value" list="width-value">
                               <datalist id="width-value">
                                  <option value="100">
                                  <option value="150">
                                  <option value="200">
                                  <option value="250">
                               </datalist>


                              <p class="calculator-text-value">Длина бруса(мм)</p>
                              <input  id="length" class="calculator-value" list="length-value">
                                <datalist id="length-value">
                                   <option value="6000">
                                </datalist>

                                <p class="calculator-text-value">Количество кубов</p>
                                <input id="amount" class="calculator-value" name="calculateValue">

                              <div class="wrapper-calculator-block-btn">
                                <button type="button" name="button" class="calculator-block-btn" id="button">Рассчитать</button>
                              </div>
                              <div class="calculator-block-result">
                                <h3 class="calculator-text-result">Результат</h3>
                                <p id="result" class="calculator-value-result">Введите значения</p>
                                <p id="surface-area" class="calculator-value-result">Введите значения</p>
                              </div>

                        </form>

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

function calculateThis() {
    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 wordsResult = '  шт. бруса';
    let wordsSurfaceArea = ' общая площадь, шт';


    if (!height || !width || !length || !amount) {
      document.getElementsByClassName('calculator-value')[0].classList.add('empty');
    } else {
      document.getElementsByClassName('calculator-value')[0].classList.remove('empty');
    }

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

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

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

    }

Comments

[oink]

getElementsByClassName('calculator-value')[0]
Эта часть строки выбирает первый элемент из списка элементов с классом .calculator-value.
Соответственно, вместо [0] следует выбирать незаполненные элементы.

[Smirator]

oink, Получается getElementsByClassName('calculator-value')[0,1,2,3]? Не очень понял, благодарю за наводку!

[oink]

Smirator, не совсем, [0,1,2,3] просто выберет первые 4 элемента. Надо бы пройтись по ним, скажем, в цикле, и проверить каждый, пустой он или нет, и в зависимости от этого навешивать класс.

Answer 1

[Андрей Мартынкевич]

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 wordsResult = '  шт. бруса';
  let wordsSurfaceArea = ' общая площадь, шт';


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

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

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

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

}

А для того, чтобы не выводилось Nan и 0 можете указать начальное значение или выйти из функции calculateThis проверив имеется ли у кого-то класс empty