Day18 - DOM(04) - BMI - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 18

自我挑戰組

JavaScript 新手筆記系列第 18 篇

Day18 - DOM(04) - BMI

11th鐵人賽 javascript

hokou

2019-10-03 23:14:12

1325 瀏覽

分享至

前言

延續之前的 DOM 內容，然後再進行 BMI 的練習吧！

操作 HTML 內容

createElement()：建立一個元件
appendChild()：加入為指定元件(1)的子元件(1-1)

index.html

<body>
    <ul id="list">
        <li><a id="google" href="#">點我連結到Google</a></li>
    </ul>

    <script src="JS/test.js"></script>
</body>

test.js

var son1 = document.createElement('li');
// 設定一個元件為li
son1.textContent = "點我連結到Yahoo";
// 元件內容為"點我連結到Yahoo"
var father = document.querySelector('#list');
// 找到 id = list 的元件
father.appendChild(son1);
// 將 son1 附加到 father ，成為一個新的子節點

// 如果將 textContent 改為 innerHTML
// 還可以增加相關屬性
son1.innerHTML = '<a href=\"https://tw.yahoo.com/\">點我連結到Yahoo</a>';

BMI

雖然結果有出來，但感覺不夠精簡或是順序不知是否有誤，歡迎大家提供建議
其實還可以再追加一些判斷，例如不能為空或是負數之類的，有機會再實作

index.html

<body>
    <h1>請輸入你的身高體重</h1>
    <!-- 設定標題 -->
    <p>體重： <input type="number" id="weight" value=""> 公斤</p>
    <!-- input 用來輸入，格式為數字 -->
    <p>身高： <input type="number" id="height" value=""> 公分</p>
    <!-- input 用來輸入，格式為數字 -->
    <input type="submit" value="計算" onclick="BMIcalculate()">
    <!-- 建立一個按鈕，按下時會執行函數 BMIfun()  -->
    <p>BMI 計算的結果為：<em id="BMI"></em></p>
    <!-- 將 BMI 的數值填入 -->
    <p>判斷為：<em id="ans"></em></p>
    <!-- 將 ans 的數值填入 -->
    <script src="JS/test.js"></script>
</body>

將身高與體重的數值設為輸入(input)
按下按鈕後進行函數 BMIcalculate() 的計算
將計算結果顯示到對應的 id 上

test.js

function BMIcalculate(){
    var weight = document.querySelector('#weight').value;  // 重量
    var height = document.querySelector('#height').value; // 身高(公分)
    // 讀取輸入的值 .value
    var BMI = document.querySelector('#BMI');
    var ans = document.querySelector('#ans');
    BMI.innerHTML = BMIfun(weight,height);
    // 將 BMIfun() 的值存入 id = BMI
    ans.innerHTML = BMIans(BMIfun(weight,height));
    // 將 BMIans() 的值存入 id = ans
}

// 依照 BMI 公式進行計算後回傳
function BMIfun (weight,height){
    height = height / 100;  // 換算公尺
    BMI = weight / (height * height);
    BMI = BMI.toFixed(2);  // 小數2位
    // console.log(BMI);
    return BMI ;
}

// 將 BMI的值代入進行判斷後回傳
function BMIans(BMI){
    // console.log(BMI);
    // 檢查用，確保輸入對的值
    if (BMI >= 18 && BMI <= 24){
        return "似乎還蠻正常的！";
        } else if (BMI > 24){ 
            return "似乎有點過胖囉！";
        } else { 
            return "似乎有點過瘦囉！";
        }
}