.className 不适用于表单验证

Question

I am having an issue with the .className on both getWeight.length < 1 and getHeight.length < 1, its not adding the class name formValidation.

Any ideas why it's not working? I have been staring at the code for so long I can't seem to figure out what's going on!

Many thanks

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

You are trying to add classname to value of element (input, I suppose).

getWeight and getHeight are values, not DOM actual elements.

Try:

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) {
    //alert('Please enter your weight');
    getWeight.className = 'formValidation';
}
else if (getHeight.value.length < 1) {
    //alert('Please enter your height');
    getHeight.className = 'formValidation';
}

CodePen here