提出なしで表示

Question

私は非常に単純なBMIの計算機を構築していますが、提出のインセンティブ私は合計値を入力し、提出することなくリアルタイムでメッセージ（div）を表示する方法でしょうか？

<label>Weight in kg 
    <input text="text" name="weight" id="input1"> 
</label> 
<BR> 
<label>Height in cm 
    <input text="text" name="height" id="input2"> 
</label> 
<BR> 
<button type="button" id="button1">Calculate</button> 

document.getElementById('button1').onclick = function(yourBmi) { 
    var weight = document.getElementById('input1').value; 
    var height = document.getElementById('input2').value; 
    height = height/100 
    var bmi = ((weight)/(height * height)); 
    var result = "" 
    if (bmi < 18.5) { 
     result= "Underweight"; 
    } else if (bmi > 25 && bmi < 30) { 
     result= "Overweight"; 
    } else if (bmi > 30) { 
     result = "Obese"; 
    } else { 
     result = "Normal"; 
    } 

    bmi = bmi.toFixed(2); 

    alert("Your weight is " + weight + "kg" + "\nYour height is " + height + "m" + "\nyour BMI is " + bmi + "\nTherefore you are " + result); 
}; 

デモ：https://jsfiddle.net/mudp2bx3/

Answer 1

がkeyupイベントは、入力の一つで発生したときにも機能するから、あなたのロジックを抽出し、ボタンがクリックされたときにそれを呼び出す、とすることができ、これを達成するために。

また、BMI値が有効であることを確認するために、（少なくとも基本的な）検証をいくつか追加する必要があります。私は、アラートはあなたがのテキストを更新した負荷に隠されたdivを追加することができ、その場合にはdivのショーが

を隠すなどのように、値に応じてメッセージを交換することにしたい

と

function calculateBMI() { 
 
    var weight = document.getElementById('input1').value; 
 
    var height = document.getElementById('input2').value/100; 
 
    var output = document.getElementById('output'); 
 

 
    var bmi = weight/(height * height); 
 
    var result = ""; 
 

 
    if (bmi < 18.5) { 
 
    result = "Underweight"; 
 
    } else if (bmi > 25 && bmi <= 30) { 
 
    result = "Overweight"; 
 
    } else if (bmi > 30) { 
 
    result = "Obese"; 
 
    } else { 
 
    result = "Normal"; 
 
    } 
 

 
    bmi = bmi.toFixed(2); 
 
    
 
    if (bmi && bmi != Number.POSITIVE_INFINITY && !isNaN(bmi)) { 
 
    output.innerHTML = 'Your weight is ' + weight + 'kg<br />Your height is ' + height + 'm<br />your BMI is ' + bmi + '<br />Therefore you are ' + result; 
 
    output.style.display = 'block'; 
 
    } else { 
 
    result.innerHTML = ''; 
 
    output.style.display = 'none'; 
 
    } 
 
} 
 

 
document.getElementById('input1').addEventListener('keyup', calculateBMI); 
 
document.getElementById('input2').addEventListener('keyup', calculateBMI); 
 
document.getElementById('button1').addEventListener('click', calculateBMI);

#output { display: none; }

<label>Weight in kg 
 
    <input text="text" name="weight" id="input1"> 
 
</label><br /> 
 
<label>Height in cm 
 
    <input text="text" name="height" id="input2"> 
 
</label><br /> 
 
<button type="button" id="button1">Calculate</button> 
 

 
<div id="output"></div>