Javascript初级

Javascript代码从上往下执行,当需要根据页面input获取值计算结果时,获取值和计算过程都要放在onclik调用的函数里边,
若放在onclik之前,则在触发事件之后只向下执行,不会再获取前边的值,会导致bug.
(如下代码,粉色部分必须写在函数里,要与Java的全局变量区分开)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>BMI</title>
    <style>
        div{
            width: 300px;
            height: 500px;
            float: left;
        }
        #bmiDiv{
            border: 1px solid black;
        }
    </style>

</head>
<body>
<div >
    姓名:<input type="text" id="userName" placeholder="请输入您的名字"/> <br/>
    体重:<input type="text" id="userWeight" placeholder="单位是kg"/>kg<br/>
    身高:<input type="text" id="userHeight" placeholder="单位是m"/>m <br/>
    <button id="btn">BMI</button>
</div>
<div id="bmiDiv"></div>
<script>
    var userName1=document.getElementById('userName');
    var userWeight1=document.getElementById('userWeight');
    var userHeight1=document.getElementById('userHeight');

    var btn1=document.getElementById('btn');
    var bmiDiv1=document.getElementById('bmiDiv');
    btn1.onclick = function(){
        var userName2=userName1.value;
        var userWeight2=parseFloat(userWeight1.value);
        var userHeight2=parseFloat(userHeight1.value);
        var bmi=userWeight2/(userHeight2*userHeight2);
        var zt=(bmi>18.5)&&(bmi<23.9)?'健康':'不健康';
        bmiDiv1.innerHTML=userName2+',你的身高是'+userHeight2+'米,体重是'
        +userWeight2+'kg,你的BMI值是'+bmi +'。<br/>您的身体是'+zt+'的';
    }



</script>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/pk142536/article/details/77871192