如何解决函数内为全局变量赋值后无法全局访问的问题？

你的问题核心有两个关键点：变量更新的时机和遍历DOM集合的方式，以下是具体的修正方案和原因说明：

一、核心问题原因 #

1. 异步触发的变量更新：点击事件是用户交互触发的异步操作，你如果在页面加载完成后直接在全局作用域打印chosenRating，此时还未触发点击事件，变量自然保持初始值（0或undefined）。只有在点击按钮之后访问该变量，才能拿到更新后的值。
2. for...in遍历的潜在问题：用for...in遍历DOM元素集合（比如NodeList）时，会遍历到集合原型链上的属性（如length、item方法），可能导致给非按钮元素绑定事件，引发意外问题。

二、修正后的代码 #

let chosenRating = 0;

// 改用forEach遍历DOM集合，避免for...in的原型链遍历问题
ratingButtons.forEach(btn => {
    btn.onclick = (e) => {
        // 用currentTarget确保获取的是绑定事件的按钮本身，避免事件冒泡导致的target错误
        chosenRating = e.currentTarget.innerHTML;
        
        // 移除所有按钮的选中状态
        ratingButtons.forEach(button => button.classList.remove('selected'));
        // 给当前点击的按钮添加选中状态
        e.currentTarget.classList.add('selected');
        
        // 点击后立即打印，能看到更新后的值
        console.log(chosenRating);
    };
});

// 示例：通过另一个按钮查看最新的chosenRating值
// 假设页面上有一个id为"check-rating"的按钮
document.getElementById('check-rating')?.addEventListener('click', () => {
    console.log('当前选中的评分：', chosenRating);
});

三、额外注意事项 #

• 确保ratingButtons是正确获取的DOM元素集合（比如通过document.querySelectorAll('.rating-button')），且代码在DOM加载完成后执行（可以放在DOMContentLoaded事件回调中，或者直接放在页面底部）。
• 若按钮内部包含子元素（如<span>），e.target可能指向子元素而非按钮本身，用e.currentTarget能稳定获取绑定事件的按钮元素。

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