Day29-JavaScript語法(2)

第 11 屆 iThome 鐵人賽

DAY 29

Modern Web

每個人都可以做出理想中的網站!系列第 29 篇

11th鐵人賽

tina888

團隊紅蟳當兵等他開賽

2019-10-15 21:56:42

893 瀏覽

上一篇我們有說到，想要在HTML中加入JavaScript，只要在<head>或是<body>中加入<script></script>標籤，就可以在裡面寫入JavaScript的程式語法了。
今天就直接來個程式碼的範例吧!

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
   
   <script type="text/javascript">
       function ChangeIt(){
       var NewWords=document.getElementById("SentenceBox").value;
       document.getElementById("NewSentence").innerHTML=NewWords;
       }
</script>

<p id="NewSentence">更改文字!</p>
<input type="text" id="SentenceBox">
<input type="button" value="變!" onclick="ChangeIt()">
</body>
</html>

增加互動性顧名思義就是要讓使用者在網頁做了某個動作時，網頁能有所回應。
本範例中我們所設計的功能就是當使用者在box中輸入一句新的話並按下旁邊寫著"變!"的按鈕，上面那一行字就會變成剛剛使用者輸入的字。

innerHTML讓我們可以直接設定HTML裡面的東西，只要再加上getElementById和HTML裡面的id名字，就可以對該id做設定。

參考資料:https://www.wibibi.com/info.php?tid=400