如何通过JavaScript获取被点击HTML元素的value参数

我来帮你解决这个问题～你现在的代码存在两个小问题：一是每次点击<li>都会执行dothis函数，给所有.page-item重复绑定点击事件，会导致后续点击触发多次逻辑；二是没法直接拿到当前点击元素的value值。这里有两种靠谱的解决办法：

方法一：移除内联onclick，统一绑定事件（推荐） #

这种写法更符合现代JS的最佳实践，避免重复绑定，逻辑更清晰。

第一步：修改HTML结构 #

给外层<ul>加上id="btnContainer"（你的JS里用到了这个ID，但原HTML里没加），同时移除<li>上的onclick属性：

<ul id="btnContainer">
  <li class="page-item" value="ABC"><a class="page-link" href="#">Put ABC</a></li>
  <li class="page-item" value="DCF"><a class="page-link" href="#">Put DCF</a></li>
</ul>

第二步：优化JavaScript代码 #

在点击事件的回调函数里，通过this直接指向当前被点击的<li>元素，再获取它的value属性：

const dothis = () => {
  const btnContainer = document.getElementById("btnContainer");
  const btns = btnContainer.getElementsByClassName("page-item");
  
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      // 切换active类（用classList操作更安全）
      const current = document.getElementsByClassName("active");
      if (current.length > 0) {
        current[0].classList.remove("active");
      }
      this.classList.add("active");
      
      // 获取当前<li>的value值
      const itemValue = this.getAttribute("value"); 
      // 这里可以把value用在你需要的逻辑里，比如打印出来
      console.log("当前选中的value是：", itemValue);
    });
  }
}

// 页面加载完成后再执行绑定，避免找不到元素
document.addEventListener('DOMContentLoaded', dothis);

方法二：保留内联onclick，传递当前元素 #

如果你习惯用内联onclick，可以把当前点击的<li>作为参数传给dothis函数：

第一步：修改HTML的onclick #

把onclick="dothis()"改成onclick="dothis(this)"，这样就能把当前元素传入函数：

<ul>
  <li class="page-item" value="ABC" onclick="dothis(this)"><a class="page-link" href="#">Put ABC</a></li>
  <li class="page-item" value="DCF" onclick="dothis(this)"><a class="page-link" href="#">Put DCF</a></li>
</ul>

第二步：修改JavaScript函数 #

接收传入的元素参数，直接获取它的value：

const dothis = (clickedItem) => {
  // 切换active类
  const current = document.getElementsByClassName("active");
  if (current.length > 0) {
    current[0].classList.remove("active");
  }
  clickedItem.classList.add("active");
  
  // 获取并使用value值
  const itemValue = clickedItem.getAttribute("value");
  console.log("当前选中的value是：", itemValue);
}

两种方法都能轻松拿到<li>的value值，其中方法一的扩展性更好，推荐使用哦～

内容的提问来源于stack exchange，提问作者thisissifumwike