Hello，我們前面知道了怎麼透過 JS 去更換網頁的內容，也知道變數與函式的用途，學了這麼多零碎的知識是不是還感覺不到這些概念的使用時機，以及如何透過這些方法去完成一些應用工具呢，學習上如果沒有成就感其實就很難繼續下去～

所以今天我們就把前面林林總總的知識整合起來，來動手做一個簡單版的計算機吧！原本是打算一篇就完成這個計算機，但是想到既然這個系列是面向超新手，如果急於一篇完成很多地方可能反而匆匆帶過沒解釋清楚，因此就分上下集來拆分這個計算機的實作過程吧！

直接先看我們要做出來的成品 簡易計算機
也直接附上完整程式碼，後續再慢慢解說：

HTML

<div class="wrap">
   <div class="computer">點餐機</div>
   <p>我要<input id="ham" type="text">個漢堡</p>
   <p>還有<input  id="coke" type="text">杯可樂</p>
   <p>這樣總共<input id="count" value="計算中" type="button"></input>
總計是 <em id="total"></em>元。
</p>
</div>

JavaScript

document.getElementById('countId').onclick = function(){
    var hamPrice = 50;
    var cokePrice = 20;
    var hamNum = parseInt(document.getElementById('hamNumId').value)*hamPrice;
    var cokeNum = parseInt(document.getElementById('cokeNumId').value)*cokePrice;
    document.getElementById('totalId').textContent = hamNum + cokeNum
}

首先我們先把 HTML的結構寫好，並命名好 class 名稱還有 ID 名稱，class 是我們在改變這個計算機外觀時會透過 CSS 用到的，ID 則是在寫 JS 時需要去抓元素時用到的！

開始用白話文翻譯每段程式碼

// 第一行 
document.getElementById('count').onclick ＝ function(){}

這行是說我們要去抓整份文件中有一個叫做 count 的元素，後面的 .onclick 代表一個點擊事件。
點擊後會執行後面的 function 函式。

測試一下這行程式碼，就會發現按了按鈕就會跳出成功點擊到了的訊息！

document.getElementById('countId').onclick = function(){
  alert('你成功點擊到我了！');
}

接下來我們就可以在這函式內寫我們要執行的程式碼囉，首先我們可以試試這樣寫！

document.getElementById('count').onclick = function(){
    var hamNum = document.getElementById('ham').value;
    var cokeNum = document.getElementById('coke').value;
    document.getElementById('total').textContent = hamNum + cokeNum
}

這時候可以發現，在計算後的結果如果你在漢堡與可樂欄位各輸入 2 ，答案竟然不是 4 而是 22，不是已經把兩個數字加總，怎麼會這樣呢？

那是因為目前對 JS 來說後面的 hamNum + cokeNum 並不是屬於兩個數字的相加，而是兩個字串的相加，在第五天的認識變數的章節有提到資料有很多型別，數字、字串、布林等等的....這邊我們可以透過一個語法去做檢查！

typeof()
typeof()是可以檢查目前的資料型別，所以我們可以增加第五行的typeof()去檢查目前裡面的資料型態，結果是字串。

document.getElementById('count').onclick = function(){
    var hamNum = document.getElementById('ham').value;
    var cokeNum = document.getElementById('coke').value;
    document.getElementById('total').textContent = hamNum + cokeNum;
    console.log(typeof(hamNum + cokeNum));
};

所以為了讓裡面的數值取出來後可以正常的相加，我們就要在學一個把字串轉為數值的方法就是 parseInt()，這個函式就可以把我們取出來的值轉化成數字，因此我們把要取出值得那行程式碼用 parseInt() 包起來變成這樣！

document.getElementById('count').onclick = function(){
    var hamNum = parseInt(document.getElementById('ham').value);
    var cokeNum = parseInt(document.getElementById('coke').value);
    document.getElementById('total').textContent = hamNum + cokeNum;
    console.log(typeof(hamNum + cokeNum));
};

有木有～
終於可以成功的把輸入的兩個數字相加了，透過 typeof(hamNum + cokeNum) 檢查，console.log 也是顯示是數字的資料型態，是否有點成就感了呢，明天我們就更加完善這個計算機吧！