# function 函式- 實作情境「計算機」- 1

- 本節小重點-1:

1. **HTML 標籤** - input , tpye="text" ，類似**輸入框的欄位**
2. **HTML 標籤** - input , type="button"，這是一個**按鈕**

第一個步驟，撰寫 click 事件，確認可以撈取text欄位的值 - `value`

- onclick 事件撰寫:

// HTML:

<div class="container">
    <h1>六角西餐廳</h1>
    <p>服務生:Hello，請問您想要點什麼?</p>
    <p>
        顧客:給我<input id="hamNum" type="text">個漢堡，再<input id="cokeNum" type="text">杯可樂吧。
    </p>
    <p>服務生:<input type="button" id="countId" value="計算中">，好的，總計是:<em id="totalId"></em>元。</p>
</div>

// JavaScript:

// 指定到此id，當它被點擊時，則觸發下列是件:
document.getElementById('countId').onclick = function() {
    var hamBurger = document.getElementById('hamNum').value;
    console.log(hamBurger);
}


// 可以用 alert or console 的方式來確認按下去是否有反應是件

---

若按下計算中:

//3

---

### 計算機出包?

// 指定到此id，當它被點擊時，則觸發下列 events:

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;
}

// 我們回到瀏覽器做計算時測:
// 理論上 12+2 應該要等於 14，卻顯示: 122?   


---

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