제출하지 않고 표시

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 부하에 추가 할 수 숨 깁니다 같은 메시지가 값에 따라로 대체 할 필요에 따라 다음과 같이 보여 t에서

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>