JavaScript中如何獲取點擊列表項的內容并使用？

3213

JavaScript中如何獲取點擊列表項的內容并使用？

網頁開發(fā)中，用戶交互至關重要。例如，用戶點擊列表項（

  • 標簽），我們需要獲取其內容并執(zhí)行相應操作。本文演示如何用JavaScript獲取點擊
  • 元素的內容，并將其傳遞給自定義函數。

    假設我們有一個簡單的html列表：

    <ul id="test">   <li>glen</li>   <li>tane</li>   <li>john</li>   <li>ralph</li> </ul>

    目標：點擊任意

  • 元素，獲取其文本內容，并作為參數傳遞給函數。

    以下JavaScript代碼實現此功能：

    立即學習“Java免費學習筆記（深入）”；

    window.onload = function() {   let listItems = document.getElementById("test").getElementsByTagName("li");    for (let i = 0; i < listItems.length; i++) {     listItems[i].onclick = function() {       let value = this.innerHTML;       myFunction(value);     };   } };  function myFunction(value) {   console.log("Clicked item content:", value);   // 在這里添加你需要的操作 }

    這段代碼首先獲取所有

  • 元素，然后遍歷每個元素，添加onclick事件監(jiān)聽器。點擊
  • 元素時，this.innerHTML獲取其文本內容，賦值給value變量，再傳遞給myFunction函數處理。myFunction是一個占位函數，你可以根據實際需求添加所需操作。示例中，我們簡單地將值打印到控制臺，你可以替換成任何你需要的操作。

    • ? 版權聲明
    THE END
    后端開發(fā)
    # html# JavaScript# 事件# this# innerHTML
    喜歡就支持一下吧
    點贊13 分享