今次把 BMI 的計算結果，直接顯示在網頁上
index.html
<body>
<p>小明的體重為 <em id="weight"></em> 公斤</p>
<p>身高為 <em id="height"></em> 公分</p>
<p>BMI 計算的結果為：<em id="BMI"></em></p>
<p>判斷為：<em id="ans"></em></p>
<script src="JS/test.js"></script>
</body>
<em> 表示，並設定相關 id
id="weight"
id="height"
id="BMI"
id="ans"
src="JS/test.js"讀取 JS 資料夾內的 test.js 檔案test.js
var weight = 60; // 重量
var height = 1.70; // 身高(公尺)
var BMI = weight / (height * height);
var ans;
console.log("BMI值：" + BMI); // 印出結果
if (BMI >= 18 && BMI <= 24){
ans = ("似乎還蠻正常的！");
console.log(ans);
} else if (BMI > 24){
ans = ("似乎有點過胖囉！");
console.log(ans);
} else {
ans = ("似乎有點過瘦囉！");
console.log(ans);
}
document.getElementById('weight').textContent = weight;
document.getElementById('height').textContent = height * 100; // 公分
document.getElementById('BMI').textContent = BMI;
document.getElementById('ans').textContent = ans;
document.getElementById( ).textContent 進行各變數的轉換
document.getElementById('weight').textContent = weight; 為例執行結果
小數點太多
toFixed(小數位數)，不過處理過的數字會變字串(使用 typeof 查)var a = 3.1415;
console.log(a.toFixed(2)); // 小數2位，顯示3.14
console.log(typeof a); // 為 number
var a1 = a.toFixed(2);
console.log(a1); // 小數2位，顯示3.14
console.log(typeof a1); // 為 string
var b = 3.1415;
console.log((b * 100) / 100 ); // 測試顯示3.1415
console.log(typeof b); // 為 number
document.getElementById('BMI').textContent = BMI.toFixed(2);
// 顯示小數2位為20.76
試試看把 index.html 裡的 <script src="JS/test.js"></script>移到<body>的最上面看看
接下來就進入函數的部分吧！
iThome鐵人賽
看影片追技術