点击下拉菜单选项后文本显示undefined问题求助

你的问题确实出在this.innerHTML上，核心原因是箭头函数不会绑定自身的this上下文，它会继承外层作用域的this（浏览器全局环境下为window对象），而window.innerHTML不存在，因此显示undefined。

下面提供三种可行的修复方案：

方案1：改用普通函数绑定事件 #

普通函数的this会自动指向触发点击事件的DOM元素（即被点击的<li>）：

const options = document.getElementsByClassName("options");
const selectText = document.getElementById("selectText");

for (option of options) {
    option.onclick = function() {
        selectText.innerHTML = this.innerHTML;
    }
}

方案2：通过事件对象获取目标元素 #

利用事件回调的event参数，直接获取触发事件的节点：

const options = document.getElementsByClassName("options");
const selectText = document.getElementById("selectText");

for (option of options) {
    option.onclick = (e) => {
        selectText.innerHTML = e.target.innerHTML;
    }
}

方案3：直接引用循环中的当前元素 #

for...of循环的变量属于块级作用域，每个迭代会创建独立的option变量，可直接在箭头函数中引用：

const options = document.getElementsByClassName("options");
const selectText = document.getElementById("selectText");

for (const option of options) {
    option.onclick = () => {
        selectText.innerHTML = option.innerHTML;
    }
}

内容的提问来源于stack exchange，提问作者Jian-Di