Javascript textContent returns undefined

Question

我正在用HTML、CSS和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) {
option.onclick = () => {
selectText.innerHTML = this.textContent;
list.classList.toggle("hide");
arrow.classList.toggle("rotate");
}
}

<div id="selectField" class="select">
<p id="selectText">Select a platform</p>
<i id="arrow" class="fa-solid fa-caret-down"></i>
</div>
<ul id="list" class="hide">
<li class="options">
<i class="fa-brands fa-facebook"></i>
<p>Facebook</p>
</li>
<li class="options">
<i class="fa-brands fa-linkedin"></i>
<p>Linkedin</p>
</li>
<li class="options">
<i class="fa-brands fa-twitter"></i>
<p>Twitter</p>
</li>
<li class="options">
<i class="fa-brands fa-discord"></i>
<p>Discord</p>
</li>
<li class="options">
<i class="fa-brands fa-stack-overflow"></i>
<p>Stack-overflow</p>
</li>
</ul>

但是每当我点击列表项时，它返回未定义，而不是写.textContent，如果我写.innerText，那么它只返回最后一个列表项。

Answer 1

代替使用this获取事件点击目标并读取它的文本内容，参见:

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) {
option.onclick = (e) => {
selectText.innerHTML = e.target.textContent;
list.classList.toggle("hide");
arrow.classList.toggle("rotate");
}
}

<div id="selectField" class="select">
<p id="selectText">Select a platform</p>
<i id="arrow" class="fa-solid fa-caret-down"></i>
</div>
<ul id="list" class="hide">
<li class="options">
<i class="fa-brands fa-facebook"></i>
<p>Facebook</p>
</li>
<li class="options">
<i class="fa-brands fa-linkedin"></i>
<p>Linkedin</p>
</li>
<li class="options">
<i class="fa-brands fa-twitter"></i>
<p>Twitter</p>
</li>
<li class="options">
<i class="fa-brands fa-discord"></i>
<p>Discord</p>
</li>
<li class="options">
<i class="fa-brands fa-stack-overflow"></i>
<p>Stack-overflow</p>
</li>
</ul>