JavaScript函数返回NaN及按钮点击无响应问题排查求助

我来帮你排查下代码里的问题，你遇到的NaN和按钮点击无响应问题，其实都是几个小的逻辑疏漏导致的，咱们一步步拆解来看：

问题1：函数返回NaN的原因 #

在testFunction里，你定义了内部函数testShow(z)，它需要接收一个参数z来计算。但最后调用return testShow();时没有传递任何参数，这时候testShow里的z会变成undefined，用undefined乘以x（哪怕x是有效数字），结果都会是NaN——这就是函数返回NaN的直接原因。

问题2：按钮点击无响应的原因 #

按钮的onclick事件调用testFunction()时没有传参数，导致data是undefined，x也就变成undefined，后续所有计算都会出错；另外，就算函数能正常返回值，你也没有把返回的结果更新到页面的<p>元素里，所以点击按钮后页面完全没变化。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<body>
    <p id="test">Hello World</p>
    <script>
        function testFunction(data) {
            // 给data设置默认值，避免不传参数时出现undefined
            var x = data || 0;
            var y = 3;
            var z = x + y;
            
            function testShow(zVal) {
                var b = zVal * x;
                return b;
            }
            // 调用testShow时传入计算好的z值
            return testShow(z);
        }

        // 初始化页面显示结果
        document.getElementById("test").innerHTML = testFunction(2);

        // 按钮点击事件处理：调用函数并更新页面
        function handleButtonClick() {
            // 这里可以自定义传入的参数，比如传5
            var result = testFunction(5);
            document.getElementById("test").innerHTML = result;
        }
    </script>
    <button type="button" onclick="handleButtonClick()">Click me</button>
</body>
</html>

关键修改说明 #

• 给data添加了默认值|| 0：这样就算调用函数时不传参数，x也会是有效数字0，避免计算出错；
• 调用testShow(z)时传入了计算好的z：确保内部函数能拿到有效的数值进行计算，不会出现undefined；
• 新增handleButtonClick函数：专门处理按钮点击事件，负责调用testFunction并把结果更新到页面，解决点击无反应的问题；
• 你可以根据需求修改handleButtonClick里传入的参数（比如换成3、4等），就能看到不同的计算结果啦。

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