<!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
邏輯思維
- onclick觸發showBMI()函數
- 從html取得值
- 運算出bmi之結果
- 判斷是否於正常範圍
- 把結果寫回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
邏輯思維
- 先取亂數
- onclick觸發myFunction()函數
- 從html取得值
- 判斷是否正確
- 把結果寫回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>deck
By q8745912
deck
- 89
