實作BMI體重計－JavaScript

利用基礎的JS概念，逐一建構BMI計算，包括資料新增的順序變化。

預備餡料：為html設定id及class

JS起手式：設置變數

var inputHeight = document.getElementById( 'height' );
var inputWeight = document.getElementById( 'weight');
var inputSend = document.getElementById( 'send' );
var btnClean = document.getElementById( 'clean');
var listRecord = document.querySelector( '.list-unstyled');
var arrayBMIrecord = [];

/* average() 所需定義變數 */
var averageData = document.getElementById('averageBMI'); 
var BMItotal = 0;
var BMIaverage = 0;

/*設置不同BMI的顯示文字及顏色 */
var statusBMI = {
    "overThin":{
        class:"secondary",
        nameStatus: ' 過輕 '
    },
    "normal":{
        class:"primary",
        nameStatus: ' 理想 '
    },
    "warning":{
        class:"warning",
        nameStatus: ' 過重 '
    },
    "danger":{
        class:"danger",
        nameStatus: ' 危險 '
    }
}

渲染畫面

function render(){
var str = '';
arrayBMIrecord.reverse();
arrayBMIrecord.forEach((item) => {
    str  += `
    <li class="card border-${statusBMI[item.status].class} mb-1">
    <div class="card-body text-center text-${statusBMI[item.status].class}">
    <h4 class="mb-2"> ${statusBMI[item.status].nameStatus}</h4>
    <p class="mb-0"> BMI ${item.BMI} </p>
    <p class="mb-0"> height：${item.height} cm</p>
    <p class="mb-0"> weight： ${item.weight} kg</p>
    </div>
    </li>
    `
})
listRecord.innerHTML = str;

/* 將average()追加功能印至DOM */
averageData.textContent = `總計測量 ${arrayBMIrecord.length} 次，平均BMI為 ${BMIaverage}`
//陣列長度、平均
                    }

陣列調整方法

使用unshift：

處理大量資料時， unshift 的執行速度上會慢於push
每次重新排序都讓原本的元素去做轉移動作

使用sort：

設定條件將整個陣列重新排列後，回傳新陣列 • 方法會原地對一個陣列的所有元素進行排序，並回傳此陣列，排序不一定穩定。
預設的排序順序是根據字串的 Unicode 編碼位置（code points）而定。
由於依賴執行環境的實作，所以並不能保證排序的時間及空間複雜度。

使用reverse：

解決不斷反轉的問題，就是使用push + reverse()
render之後必須再次反轉

BMI計算

/* BMI計算 */
function calculateBMI(event){
event.preventDefault();
//先捕獲再冒泡
var numHeight = Number(inputHeight.value);
var numWeight = Number(inputWeight.value);
var numBMI = parseInt( numWeight / (( numHeight/100 )**2 ));
var userRecord = {
    height : '',
    weight : '',
    BMI : '',
    status : '',
}

/* average() 追加功能 */
function average(){
BMItotal += Number(userRecord.BMI);
BMIaverage = Number(BMItotal / arrayBMIrecord.length).toFixed(1);

}

//------------------------------
/* BMI判別 */
if( numBMI < 18.5 ){
    userRecord.status = 'overThin';
}else if( numBMI >= 18.5 && numBMI <= 23 ){
    userRecord.status = 'normal';
}else if( numBMI >23 && numBMI <=35 ){
    userRecord.status = 'warning';
}else if( numBMI > 35 ){
    userRecord.status = 'danger';
}else{
    return;
}
//------------------------------
//增加到陣列
arrayBMIrecord.push(userRecord);
//------------------------------
average();
//渲染
render();
arrayBMIrecord.reverse(); //再次reverse();第一筆就不會在中間了
inputHeight.value = '';
inputWeight.value = '';
}

監聽

inputSend.addEventListener( 'click' ,calculateBMI);
btnClean.addEventListener( 'click' , () =>{
    arrayBMIrecord = [];
    listRecord.innerHTML = '';
  averageData.textContent = ``;
  // 清空變數
  BMItotal = 0;
  BMIaverage = 0;
})

Codepen