為什麼當我點擊連結時我的 JavaScript 函數沒有被觸發？

點擊連結時未觸發JavaScript 函數

問題

在HTML 頁面中，側邊欄導覽中的連結旨在更新src 屬性包含內容的iFrame。儘管使用了正確的程式碼，但點擊連結時 JavaScript 函數並未執行。

錯誤

忘記透過加入括號來呼叫 JavaScript 函數是問題的主要原因。此外，還有一些建議遵循的做法：

最佳實務

1. 避免內嵌 HTML 事件屬性（onclick、onmouseover 等）：

   • 創建可讀性和調試都很差的意大利麵條代碼
   • 導致代碼重複並降低可擴展性。
   • 違反了關注點分離開發原則。
   • 幹擾回呼函數中的 this 綁定。

2. 使用事件監聽器(addEventListener()):

   • 允許簡潔高效的事件處理。
   • 分離 HTML 和 JavaScript，提高程式碼可讀性和可維護性。
   • 提供處理多個事件的有效方法

3. 使用連結進行事件處理時停用超連結導覽:

   • 將href 屬性設為# “”以阻止瀏覽器的預設導航行為。

修訂後的代碼

<button>

// Add parentheses to invoke the function on link click
function getContent() {
  iFrame.src = "LoremIpsum.html";
  console.log("Source updated!");
}

// Set up event listener for the button
btn.addEventListener("click", getContent);

以上是為什麼當我點擊連結時我的 JavaScript 函數沒有被觸發？的詳細內容。更多資訊請關注PHP中文網其他相關文章！