function 計算機案例-上

Posted on In

我的 codepen 範例

https://codepen.io/saffranwang/full/XWJdmWx

此案例要做的是，下面這樣的計算機：

  • 輸入「漢堡、可樂的數量」
  • 點擊「計算中」，就可以算出「總金額」

html 結構

html:

1
2
3
4
5
6
7
8
<div class="wrap">
    <div class="wrap-inner">
        <h1>六角西餐廳 - 顧客點餐篇</h1>
        <p>服務生：Hello，請問您想要點什麼？</p>
        <p>顧客：給我 <input type="text" id="hamNumId"> 個漢堡，再 <input type="text" id="cokeNumId"> 杯可樂吧！</p>
        <p>服務生：<input type="button" id="countId" value="計算中">，好的，總計是 <em id="totalId" class="tag"></em> 元</p>
    </div>
</div>

點擊按鈕，就觸發 function

要如何做出「點擊按鈕，就觸發 function」呢？

作法如下：

🎃 「.getElementById('countId')」：先選取「按鈕的 id」= countId

🎃 「.onclick」：代表「當 id 被點擊時，就會觸發裡面的內容」–> 在這裡，會觸發「一個 function」

🍋 這裡的 function，可以「不命名」（可以給它“空的 function 名稱”）

🎃 「var hamNum = document.getElementById('hamNumId').value;」：為了取出id="hamNumId"的內容，設定變數，並且使用.value來取出「value屬性的值」

JS:

1
2
3
4
5
6
document.getElementById('countId').onclick = function(){

    var hamNum = document.getElementById('hamNumId').value;
    var cokeNum = document.getElementById('cokeNumId').value;
    
}

觀念講解：事件

🎃 當我觸發到「瀏覽器的“事件”」，瀏覽器就會去執行“裡面的內容”

「瀏覽器的“事件”」，例如：

  • .onclick 點擊
  • 滑鼠滑過去
  • 滾輪滾動時
  • 瀏覽器左右伸縮

用.value取出「value屬性的值」

例如

🎃 我想要取出<input>的「value屬性的值」 = 90

html:

1
<input type="text" id="hamNumId" value="90">

JS:

🎃 這裡的.value，取出的就是：在 html 中，<input>的「value屬性的值」

1
2
var hamNum = document.getElementById('hamNumId').value;
alert(hamNum);

alert 就會跳出「value屬性的值」了

用.type取出「type屬性的值」

例如

🎃 我想要取出<input>的「type屬性的值」 = text

html:

1
<input type="text" id="hamNumId" value="90">

JS:

🎃 這裡的.type，取出的就是：在 html 中，<input>的「type屬性的值」

1
2
var hamNum = document.getElementById('hamNumId').type;    
alert(hamNum);

alert 就會跳出「type屬性的值」了