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

第 11 屆 iThome 鐵人賽

DAY 23

自我挑戰組

JavaScript 新手筆記系列第 23 篇

Day23 - 事件(04) - BMI

11th鐵人賽 javascript

hokou

2019-10-08 23:16:49

1439 瀏覽

分享至

前言

今天會介紹一些可能會用到的事件，並優化之前的 BMI( Day18 - DOM(04) - BMI )

其他事件

關於使用在element.addEventListener('event' , functionName , BooLean);上的第一個參數上，一些有別於 click 的事件，簡單介紹如下，依實際需求使用
焦點：元件取得焦點，使用 focus ，元件失去焦點，使用 blur
keyboard：與鍵盤相關的事件，如 keydown 、 input
- event.keyCode：可以得知按下按鈕的 ASCII 碼
- 鍵盤對應數值可用 console.log 確認，如鍵盤 1 對應 ASCII 碼為 49
form：與表單相關的事件，如 change ，可以偵測表單是否變動
mouse：與滑鼠相關的事件，如 click 、 mousemove
座標：網頁水平為 x (往右為正)，垂直為 y (往下為正)，原點(0,0)在左上角
- screen：螢幕，也就是你電腦螢幕的大小
- page：頁面，所開啟的網頁，如果網頁很長有捲軸，座標就可能會超過可視區域
- client：操作端，實際操作的頁面，就算捲軸往下拉，座標也不會超過可視區域

BMI

利用 addEventListener 將相關動作都放在 JS 上
增加一個回饋機制
利用 focus 在點入輸入欄位時，進行提示需輸入數字
- 不過因為 type 也有定義為數字，應該比較不必要
利用 blur 在離開輸入欄位時，判定是否未輸入(空值)
送出時增加一個條件判斷，若有未填值的狀況，則回饋訊息

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="計算" id="calculate">
    <!-- 建立一個按鈕，按下時會執行函數 BMIfun()  -->
    <p>BMI 計算的結果為：<em id="BMI"></em></p>
    <!-- 將 BMI 的數值填入 -->
    <p>判斷為：<em id="ans"></em></p>
        <!-- 將 ans 的數值填入 -->
    <br>
    <p>回饋：<em id="feedback"></em></p>
    <script src="JS/test.js"></script>
</body>

test.js

// 點擊後確認數值後，進行 BMI 計算
function BMIcalculate(){
    var w = weight.value;
    var h = height.value;
    // 讀取輸入的值 .value
    if (w == '' || h ==''){
        return feedback.innerHTML = '身高體重不可以為空';
    }
    // 若欄位未輸入，則回饋訊息
    BMI.innerHTML = BMIfun(w , h);
    // 將 BMIfun() 的值存入 id = BMI
    ans.innerHTML = BMIans(BMIfun(w , h));
    // 將 BMIans() 的值存入 id = ans
}

// 依照 BMI 公式進行計算後回傳
function BMIfun (weight,height){
    height = height / 100;
    BMI = weight / (height * height);
    BMI = BMI.toFixed(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 "似乎有點過瘦囉！";
        }
}

// 確認是否為空值
function check(e){
    var str = e.target.value;
    if (str == ''){
        feedback.innerHTML = '欄位不可以為空';
    }
};

// 剛點入時提醒
function remind(e){
    var str = e.target.value;
    if (str == ''){
        feedback.innerHTML = '請填寫整數數字';
    }
};

var weight = document.querySelector('#weight');  // 重量
var height = document.querySelector('#height'); // 身高(公尺)

var BMI = document.querySelector('#BMI');
var ans = document.querySelector('#ans');

var calculate = document.querySelector("#calculate");
var feedback = document.querySelector('#feedback');

// 點擊後進行 BMI 計算
calculate.addEventListener('click' , BMIcalculate , false);

// 移開輸入格值進行確認
weight.addEventListener('blur', check , false);
height.addEventListener('blur', check , false);

// 點進輸入格值進行提示
weight.addEventListener('focus', remind , false);
height.addEventListener('focus', remind , false);