Day29-終於要進去新手村了-HTML DOM 範例

2021 iThome 鐵人賽

DAY 29

Modern Web

JS進入新手村,我好害怕系列第 29 篇

13th鐵人賽

h1144777

團隊想吃羊肉爐

2021-10-14 22:15:00

633 瀏覽

一樣要說明這是由彭彭影片擷取出來的例題

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM</title>
<script type="text/javascript">
function change(){
    var spanObj= document.getElementById("emotion")
    if (spanObj.innerHTML=="good"){
    spanObj.innerHTML="bad";
    spanObj.style.color="blue";

    }
    else{
    spanObj.innerHTML=="bad";
    spanObj.innerHTML="good";
    spanObj.style.color="green"

    }
    


}

</script>
</head>
<body>
    <div>
        Today is a <span id="emotion" style="color:green;">good</span> day. Let's go to movie.
    </div>
    <button onclick="change()">Change</button>

</body>    
</html>

我們分拆開來看上面的程式碼

function change(){
    var spanObj= document.getElementById("emotion")
    if (spanObj.innerHTML=="good"){
    spanObj.innerHTML="bad";
    spanObj.style.color="blue";

    }
    else{
    spanObj.innerHTML=="bad";
    spanObj.innerHTML="good";
    spanObj.style.color="green"

    }

上方我們可以看到宣告一個名為spanObj的變數，在變數資料內放入了document.getElementById("emotion")，這個方式是可以用來抓取文件內ID設定為emotion的元素，接著使用迴圈 if (spanObj.innerHTML=="good")代表著如果這個ID emotion內的資料為good的時候，就會執行spanObj.innerHTML="bad";spanObj.style.color="blue";這兩行程式碼，下方

else{
    spanObj.innerHTML=="bad";
    spanObj.innerHTML="good";
    spanObj.style.color="green"

代表著如果資料為bad，就會再將資料good放進去取代，用這種方式建立起一個循環。
接著看到下方程式碼

   <div>
        Today is a <span id="emotion" style="color:green;">good</span> day. Let's go to movie.
    </div>
    <button onclick="change()">Change</button>

我們可以看到我們用<span>標籤去註記good這個字串，並且在這個元素內加入了id="emotion"，這邊會呼應上方的函式，接著我們要想辦法可以呼叫這個函式，所以我們使用了button設定一個按鈕，在按鈕內設定一個onclick去呼叫函式change()，使用者一旦按按鈕就可以切換資料內容。

參考資料:
https://www.youtube.com/watch?v=iZ3LfVujGCM
https://ithelp.ithome.com.tw/articles/10202689
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/27430/