# function 函式- 實作情境「計算機」- 2 / 「parseInt」 轉換型別的重要語法

- 從第一篇可得知: 我們藉由兩個欄位的值去相加，得到不是正常的數值結果，本節要探討其原因及正確的做法:

### tpyeof - 查詢該變數是什麼屬性?

document.getElementById('countId').onclick = function() {
    var hamBurger = document.getElementById('hamNum').value;
    var cocacola = document.getElementById('cokeNum').value;
    var totalCount;
    totalCount = hamBurger + cocacola;
    document.getElementById('totalId').textContent = totalCount;
    
    
    // typeof 查詢 漢堡與可樂欄位的屬性 
    console.log(typeof(hamBurger));
    console.log(typeof(cocacola));
    // 得到: string;
}

可藉由上述程式，使用 `console.log();`
裡面帶語法 - typeof()，裡頭帶欲查詢的變數名稱，最後顯示則是: **string**

---

- 而 "字串" + "字串" 自然就不會是正常的數值了

用中文來解釋:"我" + "愛妳" = "我愛妳"，這樣是否就明白了?

欄位的數字並非正常的 number，故顯示的字串相加。

而這裡我們就需要使用**型別轉換**來幫助我們完成專案

---

### parseInt，讓字串轉換成 number:

- parseInt 測試:

經由測試，該變數由字串 > 數值了，這下就可以正常轉換了!

var a = '33';
console.log(typeof(a));
// string
a = parseInt(a);
console.log(typeof(a));
// number

### 讓欄位轉換型別並正確計算吧:

- parseInt(包住裡面的內容);

document.getElementById('countId').onclick = function() {
    var hamBurger = parseInt(document.getElementById('hamNum').value);
    var cocacola = parseInt(document.getElementById('cokeNum').value);
    var totalCount;
    totalCount = hamBurger + cocacola;
    document.getElementById('totalId').textContent = totalCount;
}

onclick

// 分別在欄位輸入，假設 1、2
// 3

### 讓漢堡與可樂有單價來測試看看:

document.getElementById('countId').onclick = function() {
    var hamburgerPrice = 60; //漢堡價格
    var cokePrice = 35; // 可樂價格
    var hamburgerCount = parseInt(document.getElementById('hamNum').value) * hamburgerPrice;
    var cokeCount = parseInt(document.getElementById('cokeNum').value) * cokePrice;
    var totalCount;
    totalCount = document.getElementById('totalId').textContent = hamburgerCount + cokeCount;
}

MyCodePen:

https://codepen.io/rrpaqjcq/pen/dyJvLaJ

###### tags: `JavaScript - 學徒篇`