網頁不只是靜態的，它也可以是動態的、可互動的。JavaScript 可以讓網頁進行一些簡單的互動。今天學習如何用簡單的 JavaScript，實現一個基本的互動功能。
JavaScript 的程式碼通常會放在 <script> 標籤中，可以放在 <head> 或 <body> 裡面。不影響頁面載入速度，通常會放在 <body> 的最下方。
最簡單的互動：點擊按鈕後改變文字內容。
在 index.html 中加入：
HTML
<p id="my-text">點擊下面的按鈕，看看會發生什麼！</p>
<button onclick="changeText()">點我！</button>
<script>
function changeText() {
const textElement = document.getElementById('my-text');
textElement.textContent = '哈囉！你成功了！';
}
</script>
這段程式碼中：
document.getElementById('my-text') 找到 id 為 my-text 的元素。textContent 屬性用來獲取或設定元素的文字內容。onclick="changeText()" 則是在按鈕被點擊時，呼叫 changeText 這個函式。這只是 JavaScript 的冰山一角，但它打開了網頁互動的大門。
執行成果 :
iThome鐵人賽
看影片追技術
看更多