iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

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

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

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

<!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/


上一篇
Day28-終於要進去新手村了-HTML DOM 觀念介紹
下一篇
Day30:終於要進去新手村了-結語
系列文
JS進入新手村,我好害怕30

尚未有邦友留言

立即登入留言