实现点击触发数值递增功能时返回NaN的问题求助

问题原因 #

你的代码无法正常累加 hydration 数值的核心原因是变量作用域冲突：
你已经在 script 标签最外层声明了全局变量 var hydrationLevel = 0，但在 bigBottlePress 函数内部又用 var 重新声明了同名的局部变量。此时函数内的 hydrationLevel 是独立的局部变量，赋值时右侧还未完成初始化，值为 undefined，加1后得到的是无效的 NaN（非数字），自然无法正常更新数值。

修复方案 #

只需要删掉函数内部 hydrationLevel 前的 var 关键字，让函数直接修改全局变量即可，附带优化了几处HTML语法不规范的地方，完整修复代码如下：

<html>
<head>
    <meta charset="utf-8">
    <title>Bottle Clicker</title>
</head>
<body>
<a href="#" onclick="bigBottlePress()"><img src="Images/BigBottle.png" height="500"></a>
<!--<button id="bigButton" onclick="bigBottlePress()"><img src="Images/BigBottle.png"></button>-->
<br>
<br>
<input type="text" id="hydrationLevelDisplay" placeholder="Hydration Level: " disabled style="text-align:center">
<script>
    var hydrationLevel = 0
    function bigBottlePress() {
            hydrationLevel = hydrationLevel + 1
            document.getElementById("hydrationLevelDisplay").value = "Hydration Level: " + hydrationLevel;
            document.title = "Hydration Level: " + hydrationLevel;
    }
</script>
</body>
</html>

额外优化提示 #

• a标签的href属性、input的style属性统一加上引号，符合HTML语法规范，避免不同浏览器出现解析异常
• 如果后续不想点击图片后页面跳转到顶部，可以把a标签的href="#"改成href="javascript:void(0)"，点击后不会触发页面跳转

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