前端评分组件返回undefined问题求助（JavaScript）

我在完成Front End Mentor的交互式评分组件时遇到以下问题：

• 在getRate函数中使用console.log可以正常打印按钮上的数字
• 直接给let rate赋值数字时，submit函数能在thank-you-state中显示该数字
• 但使用let rate = getRate()时，thank-you-state中显示的却是undefined

原JavaScript代码 #

let chosenRate = document.querySelector('.chosen-rate');

function getRate() {
    document.querySelectorAll('.rating-btn').forEach(btn => {
        btn.addEventListener('click', e => {
            return e.target.innerText;
        });
    });
};

let rate = getRate();

function submit() {
    chosenRate.innerText = rate;
    document.querySelector('.submit-btn').addEventListener('click', () => {
        document.querySelector('.rating-state').classList.add('hide');
        document.querySelector('.thank-you-state').classList.remove('hide');
    });
}

getRate();
submit();

原HTML结构 #

<div class="survey-box">
    <div class="rating-state">
        <h2>How did we do?</h2>
        <p>
            Please let us know how we did with your support request. All
            feedback is appreciated to help us improve our offering!
        </p>
        <div id="buttons" class="buttons">
            <button class="rating-btn btn-1">1</button
            ><button class="rating-btn btn2">2</button
            ><button class="rating-btn btn-3">3</button
            ><button class="rating-btn btn-4">4</button
            ><button class="rating-btn btn-5">5</button>
        </div>
        <button class="submit-btn">Submit</button>
    </div>

    <div class="thank-you-state hide">
        <div class="selected-rate">
            <p>You selected <span class="chosen-rate"></span> out of 5</p>
        </div>
        <h2>Thank you!</h2>
        <p>
            We appreciate you taking the time to give a rating. If you ever need
            more support, don't hesitate to get in touch!
        </p>
    </div>
</div>

问题根源 #

1. getRate无返回值：整个getRate函数没有任何return语句，执行let rate = getRate()自然得到undefined。
2. 事件回调的return无效：点击事件监听函数里的return只能返回给事件处理机制，不会传递到外层的getRate函数。
3. 时机错误：页面加载时就给rate赋值，但此时用户还没点击评分，根本拿不到有效数据。

修正后的代码 #

JavaScript #

let chosenRate = document.querySelector('.chosen-rate');
let selectedRate = null; // 存储用户选中的评分

function getRate() {
    document.querySelectorAll('.rating-btn').forEach(btn => {
        btn.addEventListener('click', e => {
            selectedRate = e.target.innerText;
            // 可选：给选中按钮添加高亮样式
            document.querySelectorAll('.rating-btn').forEach(b => b.classList.remove('active'));
            e.target.classList.add('active');
        });
    });
};

function submit() {
    document.querySelector('.submit-btn').addEventListener('click', () => {
        // 判断是否选中评分
        if (selectedRate) {
            chosenRate.innerText = selectedRate;
            document.querySelector('.rating-state').classList.add('hide');
            document.querySelector('.thank-you-state').classList.remove('hide');
        } else {
            alert('请先选择一个评分！');
        }
    });
}

getRate();
submit();

HTML（修复未闭合标签） #

<div class="survey-box">
    <div class="rating-state">
        <h2>How did we do?</h2>
        <p>
            Please let us know how we did with your support request. All
            feedback is appreciated to help us improve our offering!
        </p>
        <div id="buttons" class="buttons">
            <button class="rating-btn btn-1">1</button>
            <button class="rating-btn btn2">2</button>
            <button class="rating-btn btn-3">3</button>
            <button class="rating-btn btn-4">4</button>
            <button class="rating-btn btn-5">5</button>
        </div>
        <button class="submit-btn">Submit</button>
    </div>

    <div class="thank-you-state hide">
        <div class="selected-rate">
            <p>You selected <span class="chosen-rate"></span> out of 5</p>
        </div>
        <h2>Thank you!</h2>
        <p>
            We appreciate you taking the time to give a rating. If you ever need
            more support, don't hesitate to get in touch!
        </p>
    </div>
</div>

关键修正说明 #

• 用全局变量selectedRate存储用户选择的评分，点击按钮时实时更新
• getRate专注绑定事件，不再试图返回值
• 将更新评分显示的逻辑移到提交按钮的点击事件内部，确保获取用户最新选择
• 增加未选评分的提示，优化交互
• 修复原HTML中未闭合的按钮标签

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