在點擊按鈕之前,流覽器會顯示HTML頁面內容,包括標題“<h2>What Can JavaScript Do?</h2>”和段落文本“JavaScript can change HTML content.”還有一個按鈕,其文本內容為“Click Me!”。
當用戶點擊“Click Me!”按鈕後,JavaScript代碼將執行。這段代碼的作用是通過document.getElementById("demo").innerHTML來找到ID為"demo"的段落元素,並改變它的內部HTML內容為“Hello JavaScript!”。所以點擊按鈕後,“JavaScript can change HTML content.”這段文本將會被新文本“Hello JavaScript!”替換。
總結如下:
點擊按鈕之前:
顯示標題“What Can JavaScript Do?”
顯示段落“JavaScript can change HTML content.”
顯示一個可以點擊的按鈕“Click Me!”
點擊按鈕之後:
標題保持不變
段落內容變為“Hello JavaScript!”
按鈕仍然顯示,可以再次被點擊(但由於段落內容已經改變,再次點擊不會有視覺變化,除非再次刷新頁面或有其他的JavaScript代碼改變內容)。