HTML中使用JavaScript函数累加变量失败问题求助

嘿，刚接触JavaScript几小时就动手写代码，这真的超棒！你的问题其实是新手很容易踩的变量作用域小坑，我来给你拆解清楚：

问题根源 #

你定义的NumUp函数里有个参数userRep，这个参数是函数内部的局部变量——和你在全局作用域里定义的var userRep = 0完全是两个独立的变量！所以当你在函数里执行userRep = userRep + 1时，修改的只是函数内部的这个局部变量，全局的userRep根本没被触动，自然看起来没变化。

解决方案 #

有几种简单的修复方式，根据你的需求选就行：

方式1：去掉函数的参数（推荐）

既然你想修改全局的userRep，那就不需要把它作为参数传入，直接在函数里访问全局变量即可：

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        var userID = 1;
        var userRep = 0;

        function NumUp() {
            // 直接操作全局的userRep，也可以简化成 userRep++
            userRep = userRep + 1;
        }

        // 测试一下：调用函数后打印看看
        NumUp();
        console.log(userRep); // 现在会输出1啦！
    </script>
</head>
<body>
    <!-- 你可以加个按钮触发函数，比如： -->
    <button onclick="NumUp()">点击累加</button>
</body>
</html>

方式2：用return返回新值（更符合函数封装性）

如果不想直接操作全局变量，也可以让函数接收当前值，计算后返回新值，再赋值给全局变量：

<script>
    var userID = 1;
    var userRep = 0;

    function NumUp(currentRep) {
        return currentRep + 1;
        // 或者简化成 return currentRep++;
    }

    // 调用时要把返回值赋值给全局变量
    userRep = NumUp(userRep);
    console.log(userRep); // 输出1
</script>

新手小提示 #

刚学JS一定要记住：函数内部的参数和局部变量，优先级比全局变量高。如果函数里有和全局变量同名的局部变量/参数，函数内部访问的就是局部的那个，全局变量不会被影响哦～

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