<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <h1>請輸入身高體重</h1>
        <table>
            <tr>
                <td>
                    <label>身高（公尺）：</label>
                </td>
                <td>
                    <input type="text" id="height">
                </td>
            </tr>
            <tr>
                <td>
                    <label>體重（公斤）：</label>
                </td>
                <td>
                    <input type="text" id="weight">
                </td>
            </tr>
            <tr>
                <td><button type="button" onclick="showBMI()" >提交</button></td> 
            </tr>
        </table>
        <p>你的BMI值為: <span id="bmi"></span></p>
        <p>你的體重: <span id="standard"></span></p>
    </div>
</body>
</html>

HTML 的表單

JavaScript

邏輯思維

  1. onclick觸發showBMI()函數
  2. 從html取得值
  3. 運算出bmi之結果
  4. 判斷是否於正常範圍
  5. 把結果寫回html
<script>
	function showBMI(){
		var height = document.getElementById("height").value;
		var weight = document.getElementById("weight").value;
		var bmiResult = weight / (height ** 2);		

		var str = " ";
		if(bmiResult > 24) {
			str = "過重";
		} else if(bmiResult < 18.5) {
			str = "過輕";
		} else {
			str = "正常";
		}
                
                document.getElementById("bmi").innerText = bmiResult;
		document.getElementById("standard").innerText = str;
	}
</script>

完整版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
	function showBMI(){
		var height = document.getElementById("height").value;
		var weight = document.getElementById("weight").value;
		var bmiResult = weight / (height ** 2);		

		var str = " ";
		if(bmiResult > 24) {
			str = "過重";
		} else if(bmiResult < 18.5) {
			str = "過輕";
		} else {
			str = "正常";
		}
                
                document.getElementById("bmi").innerText = bmiResult;
		document.getElementById("standard").innerText = str;
	}
    </script>
</head>
<body>
    <div>
        <h1>請輸入身高體重</h1>
        <table>
            <tr>
                <td>
                    <label>身高（公尺）：</label>
                </td>
                <td>
                    <input type="text" id="height">
                </td>
            </tr>
            <tr>
                <td>
                    <label>體重（公斤）：</label>
                </td>
                <td>
                    <input type="text" id="weight">
                </td>
            </tr>
            <tr>
                <td><button type="button" onclick="showBMI()" >提交</button></td> 
            </tr>
        </table>
        <br/>
        <p>你的BMI值為: <span id="bmi"></span></p>
        <p>你的體重: <span id="standard"></span></p>
    </div>
</body>
</html>

HTML 的表單

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
		
	<h1>終極密碼</h1>
	<p>輸入0~100的數字:</p>
	<input id="numb">
	<button type="button" onclick="myFunction()">提交</button>
	<p id="demo"></p>
</body>
</html>

JavaScript

邏輯思維

  1. 先取亂數
  2. onclick觸發myFunction()函數
  3. 從html取得值
  4. 判斷是否正確
  5. 把結果寫回html
<script>
	var n = Math.floor(Math.random()*100);
	function myFunction() {
	    var x, text;
		    // 獲取 id="numb" 的值
	    x = document.getElementById("numb").value;
	    if(x > n) {
	    	text = "太高";
		    }
	    else if(x < n) {
	        text = "太低";
	    } 
	    else if(x == n) {
	        text = "bingo";
	    }
	    document.getElementById("demo").innerHTML = text;
	}
</script>

完整版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
		
	<h1>終極密碼</h1>
	<p>輸入0~100的數字:</p>
	<input id="numb">
	<button type="button" onclick="myFunction()">提交</button>
	<p id="demo"></p>
	<script>
		var n = Math.floor(Math.random()*100);

		function myFunction() {
		    var x, text;

		    // 獲取 id="numb" 的值
		    x = document.getElementById("numb").value;

		    if(x > n) {
		    	text = "太高";
			    }
		    else if(x < n) {
		        text = "太低";
		    } 
		    else if(x == n) {
		        text = "bingo";
		    }
		    document.getElementById("demo").innerHTML = text;
		}
	</script>
</body>
</html>
Made with Slides.com