• • 此问题在此处已有答案**：

What does "this" refer to in arrow functions in ES6?（10个答案）
4小时前关门了。
我正在创建一个自定义选择框的帮助下，HTML，CSS，和Javascript，这里是我的HTML代码

<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>

这是我的javascript代码

<script>
        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");
            }
        }
    </script>

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