.className 不适用于表单验证

Question

我在 getWeight.length < 1 和 getHeight.length < 1 上都遇到了 .className 的问题，它没有添加类名 formValidation。

任何想法为什么它不起作用？我一直盯着代码很长时间，我似乎无法弄清楚发生了什么！

非常感谢

JS

function calculateBMI() {

  let getWeight = document.getElementById('weight').value;

  let getHeight = document.getElementById('height').value;

  let getBMI = (getWeight / (getHeight*getHeight)).toFixed(2);

  let displayBMI = document.getElementById('displaybmi');

  if (getWeight.length < 1) {

     //alert('Please enter your weight');

      getWeight.className = 'formValidation';

    }

  else if (getHeight.length < 1) {

     //alert('Please enter your height');

     getHeight.className = 'formValidation';

    }

  else if(getBMI < 18.5) {

    displayBMI.className = 'displaybmi green';

    displayBMI.textContent = 'You\'re under weight! ' + getBMI;

    } 

   else if (getBMI >= 18.5 && getBMI <= 25) {

    displayBMI.className = 'displaybmi green';

    displayBMI.textContent = 'You\'re normal weight! ' + getBMI;

    }

   else if (getBMI > 25 && getBMI <= 29.99) {

    displayBMI.className = 'displaybmi yellow';

    displayBMI.textContent = 'You\'re over weight! ' + getBMI;

    }

   else if (getBMI >= 30 && getBMI <= 34.99) {

    displayBMI.className = 'displaybmi orange';

    displayBMI.textContent = 'You\'re obese! ' + getBMI;

    }

   else {

    displayBMI.className = 'displaybmi red';

    displayBMI.textContent = 'You\'re very obese! ' + getBMI;

   } 

}

.displaybmi {

  font-size: 16px;

  padding: 20px;

  margin-bottom:20px;

}

.red{

  background:red;

}

.yellow {

  background: yellow;

}

.green{

  background:green;

}

.orange {

  background:orange;

}

.formValidation {

  border: 2px solid red;

}

Answer 1

您正在尝试将类名添加到元素的值（我想是输入）。getWeight并且getHeight是值，而不是 DOM 实际元素。尝试：let getWeight = document.getElementById('weight');let getHeight = document.getElementById('height');let getBMI = (getWeight.value / (getHeight.value*getHeight.value)).toFixed(2);if (getWeight.value.length < 1) {&nbsp; &nbsp; //alert('Please enter your weight');&nbsp; &nbsp; getWeight.className = 'formValidation';}else if (getHeight.value.length < 1) {&nbsp; &nbsp; //alert('Please enter your height');&nbsp; &nbsp; getHeight.className = 'formValidation';}