点击图片触发addToScore时出现Uncaught ReferenceError错误求助

问题根源 #

你写的addToScore函数用了括号包裹的函数表达式写法，这种写法下函数名仅在函数内部有效，全局作用域无法访问到它，所以点击图片时会提示「addToScore未定义」。

修复方案（两种任选其一） #

方案1：改成普通全局函数定义（最直接）

把原来的函数定义部分替换成普通函数声明，这样函数会被挂载到全局作用域：

var score = 0;

function addToScore(amount){
    score += amount; // 等价于score = score + amount，写法更简洁
    document.getElementById("score").innerHTML = score;
}

方案2：将函数挂载到全局window对象上

如果坚持用函数表达式写法，需要把它赋值给window的属性，确保全局能访问到：

var score = 0;

window.addToScore = function(amount){
    score += amount;
    document.getElementById("score").innerHTML = score;
};

修复后的完整代码示例 #

<head>
    <title>Axolotl Clicker</title>
    <link rel="icon" type="image/png" href="images/Warden_Axolotl.png"/>
</head>

<body>

    <p>Score: <span id="score">0</span></p>

    <img alt="Axolotl in a bucket" src="images/Bucket_of_Blue_Axolotl.png" onclick="addToScore(1)"/>

    <script>
        var score = 0;
        
        function addToScore(amount){
            score += amount;
            document.getElementById("score").innerHTML = score;
        }
    </script>

</body>

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