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

您正在尝试将classname添加到element的值（我想是输入）。

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

CodePen here

.className不适用于表单验证

1 个答案: