Counter

功能說明

標題
次數 : 顯示目前的數字
按鈕 :
- increase : 按一下，數字+1
- reset : 按一下，數字歸0
- decrease : 按一下，數字-1

HTML重點

按鈕的id="btn"可以讓我們在之後的JavaScript部分中，利用document.getElementById()的方法來渲染該按鈕

重點程式碼如下 :

...
<!-- 主頁面 -->
<main>
        <div class="container">
            <!-- 標題 -->
            <h1>Counter</h1>
            
            <!-- 目前數字(預設為0，id為"value") -->
            <span id = "value">0</span>
            
            <!-- 按鈕 -->
            <div class="button-container">
                <!-- 減一按鈕(class為"decrease") -->
                <button class="btn decrease">decrease</button>
                <!-- 歸零按鈕(class為"reset") -->
                <button class="btn reset">reset</button>
                <!-- 加一按鈕(class為"increase") -->
                <button class="btn increase">increase</button>
            </div>
        </div>
        
    </main>
<!-- javascript -->
<script src="index.js"></script>
...

JavaScript重點

將目前數字count設為全域變數(預設為0)
1
let count = 0;

透過querySelector()去抓取id為value的元素

1	const value = document.querySelector("#value");;

透過querySelectorAll()去抓取class為btn的元素
1
const btns = document.querySelectorAll(".btn");
btns會是一個陣列，包含3個按鈕的元素

主要函數

btns.forEach(function(btn){ //針對陣列中的每個元素去做操作

    btn.addEventListener("click",function(e){
    //參數e為所謂的事件物件(Event Object)，詳情請見下方參考來源
        
        const styles = e.currentTarget.classList;
        //去抓目前目標的CSS
        
        if(styles.contains("decrease")){
            count--;
        }else if (styles.contains("increase")){
            count++;
        }else{
            count = 0;
        };
        //加減數字

        if(count > 0){
            value.style.color = "green";
        }else if(count < 0){
            value.style.color = "red";
        }else {
            value.style.color = "hsl(209, 61%, 16%)";
        //透過修改元素的color去改變顏色
    }

    value.textContent = count;
    //將數字更改為count
});