如何在结果输入框下面打印if和else结论

时间:2018-05-16 09:45:53

标签: javascript html

function bodyMassIndex() {
    var h = document.getElementById("height").value;
    var w = document.getElementById("weight").value;
    var w2 = w * w;
    var bmi = w2 / h
    document.getElementById("answer").value = bmi;

    if (bmi <= 18.5) {
        document.write('You are underwight')
    } else if (bmi > 18.5 && bmi < 22.5) {
        document.write('You are healthy')
    } else if (bmi => 22.5 && bmi < 30) {
        document.write('You are obese')
    } else {
        document.write('You are overweight')
    }
}
<form>
    Height:<br>
    <input type='number' id='height' size= '20px' ><br>
     Weight:<br>
    <input type='number' id='weight' size = '20px' > <br>
    <br>
    <hr >
    <input type='button' onclick='bodyMassIndex()' value='Get BMI' height= '20px' width= '100px'>
    <input type='text' id='answer' size= '20px' >
 </form>

“结果被跳过,而if和else语句中的结论显示(计算器消失)”

4 个答案:

答案 0 :(得分:1)

请勿使用document.write(),因为它会删除您当前的文档(这就是您的表单消失的原因)。

相反,请使用某种HTML标记并在其中打印您的邮件。

请参阅代码段:

&#13;
&#13;
function bodyMassIndex() {
    var h = document.getElementById("height").value;
    var w = document.getElementById("weight").value;
    var w2 = w * w;
    var bmi = w2 / h
    document.getElementById("answer").value = bmi;
    var result = document.getElementById("result");
    var message;
    if (bmi <= 18.5) {
        message = 'You are underwight';
    } else if (bmi > 18.5 && bmi < 22.5) {
        message = 'You are healthy';
    } else if (bmi => 22.5 && bmi < 30) {
        message = 'You are obese';
    } else {
        message = 'You are overweight';
    }
    
    result.innerHTML = message;
    
}
&#13;
<form>
    Height:<br>
    <input type='number' id='height' size= '20px' ><br>
     Weight:<br>
    <input type='number' id='weight' size = '20px' > <br>
    <br>
    <hr >
    <input type='button' onclick='bodyMassIndex()' value='Get BMI' height= '20px' width= '100px'>
    <input type='text' id='answer' size= '20px' >
    <span id="result"></span>
 </form>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

    place a p tag give it an id and use its id to add content to it dynamically.

    <html>
    <body>

    <p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

    <script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Paragraph changed!";
    }
    </script>

    </body>
    </html> 

hope this helps

答案 2 :(得分:0)

一种可能性是使用div容器来保存if ... else statement的结论。

只需在HTML中添加div,然后在.innerText的div中显示您的输出。

什么适用于div,基本上适用于每个标签,例如: G。 h1span等等。

function bodyMassIndex() {
  var h = document.getElementById("height").value;
  var w = document.getElementById("weight").value;
  var w2 = w * w;
  var bmi = w2 / h
  document.getElementById("answer").value = bmi;

  if (bmi <= 18.5) {
    document.getElementById('result').innerText = 'You are underwight';
  } else if (bmi > 18.5 && bmi < 22.5) {
    document.getElementById('result').innerText = 'You are healthy';
  } else if (bmi => 22.5 && bmi < 30) {
    document.getElementById('result').innerText = 'You are obese';
  } else {
    document.getElementById('result').innerText = 'You are overweight';
  }
}
<form>
  Height:<br>
  <input type='number' id='height' size='20px'><br> Weight:
  <br>
  <input type='number' id='weight' size='20px'> <br>
  <br>
  <hr>
  <input type='button' onclick='bodyMassIndex()' value='Get BMI' height='20px' width='100px'>
  <input type='text' id='answer' size='20px'>
  <div id="result"></div>
</form>

答案 3 :(得分:0)

function bodyMassIndex(){
var height = document.getElementById('height').value;
var weight = document.getElementById('weight').value;
var ans = document.getElementById('answer')
 var res = document.getElementById('result');
var w2 = weight * weight;
    var bmi = w2 / height;
    ans.value = bmi;
    if (bmi <= 18.5) {
      res.innerHTML = 'You are underwight';
    } else if (bmi > 18.5 && bmi < 22.5) {
        res.innerHTML = 'You are healthy';
    } else if (bmi => 22.5 && bmi < 30) {
        res.innerHTML = 'You are obese';
    } else {
       res.innerHTML = 'You are overweight';
    }
}
<form>
    Height:<br>
    <input type='number' id='height' size= '20px' ><br>
     Weight:<br>
    <input type='number' id='weight' size = '20px' > <br>
    <br>
    <hr >
    <input type='button' onclick='bodyMassIndex()' value='Get BMI' height= '20px' width= '100px'>
    <input type='text' id='answer' size= '20px' >
    <span id='result'></span>
 </form>