点击事件返回值console.log显示undefined，已返回值却无效求助

问题根源 #

• 浏览器触发点击事件时，会自动执行回调函数，但完全不会接收或处理回调的返回值，你在回调里return的内容根本没有被任何代码捕获，所以如果尝试获取这个回调的执行结果，自然是undefined。
• 你只是return了Size_Price + 数字的计算结果，但从来没把这个值赋值回Size_Price变量本身，所以这个全局变量一直保持初始值0，就算外部console.log它，也看不到变化。
• 回调函数里没声明event参数，虽然部分浏览器允许直接使用全局event对象，但这不是标准写法，存在兼容风险。

修复后的代码 #

let Size_Price = 0; // 用let声明变量，避免隐式全局污染
document.addEventListener('click', function(event) { // 声明event参数
    if (event.target.classList.contains('pizza')) {
        switch(event.target.id) { // 用switch简化多层判断逻辑
            case 'small':
                document.getElementById("Choice1").textContent = "Small";
                Size_Price += 5; // 直接更新变量值
                break;
            case 'medium':
                document.getElementById("Choice1").textContent = "Medium";
                Size_Price += 10;
                break;
            case 'large':
                document.getElementById("Choice1").textContent = "Large";
                Size_Price += 15;
                break;
            default:
                document.getElementById("Choice1").textContent = "Fatso";
                Size_Price += 18;
                break;
        }
        console.log(Size_Price); // 在这里直接输出更新后的变量值
    }
});

补充说明 #

• 现在每次点击符合条件的元素，都会直接修改Size_Price的值，在回调内console.log就能得到正确结果。
• 用let声明变量，避免之前无关键字声明导致的全局变量挂载问题，代码更规范。
• 用switch替代多层if-else，逻辑结构更清晰易维护。

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