自定义选择框：JavaScript textContent返回undefined，innerText仅返回最后项

核心问题 #

你遇到的问题根源有两个：

1. 箭头函数的this指向错误：箭头函数没有独立的this，它会继承外层作用域的this（这里是全局window对象），所以this.textContent自然是undefined。
2. 直接获取元素文本的潜在问题：即使改用普通函数，若直接取li的innerText/textContent，如果循环变量声明方式不当（比如用var）会导致只拿到最后一项；而且li内包含图标元素，精准获取<p>标签的内容更可靠。

修正后的代码 #

修改JavaScript中的选项点击事件处理逻辑：

var selectField = document.getElementById("selectField");
var selectText = document.getElementById("selectText");
var list = document.getElementById("list");
var options = document.getElementsByClassName("options");
var arrow = document.getElementById("arrow");

selectField.onclick = () => {
  list.classList.toggle("hide");
  arrow.classList.toggle("rotate");
}

for (option of options) {
  // 改用普通函数，让this指向当前点击的option元素
  option.onclick = function() {
    // 精准获取<li>内<p>标签的文本内容
    const selectedPlatform = this.querySelector('p').textContent;
    selectText.textContent = selectedPlatform;
    list.classList.toggle("hide");
    arrow.classList.toggle("rotate");
  }
}

如果偏好箭头函数，也可以通过event.currentTarget获取当前点击元素：

for (option of options) {
  option.onclick = (e) => {
    const selectedPlatform = e.currentTarget.querySelector('p').textContent;
    selectText.textContent = selectedPlatform;
    list.classList.toggle("hide");
    arrow.classList.toggle("rotate");
  }
}

为什么这样有效 #

• 普通函数的this：DOM事件处理的普通函数中，this会自动指向触发事件的DOM元素（当前点击的<li>），能正确获取目标元素。
• 精准选择<p>标签：通过querySelector('p')直接定位文本标签，避免意外获取其他元素内容，保证文本准确性。
• event.currentTarget：箭头函数中用它替代this，指向绑定事件的元素，解决箭头函数的this指向问题。

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