我试图在单击和返回 NaN 时增加一个值 [重复]答案

【问题标题】：I'm trying to increase a value when clicking and value returning NaN [duplicate]我试图在单击和返回 NaN 时增加一个值 [重复]
【发布时间】：2021-11-21 18:27:03
【问题描述】：

我尝试了很多东西，但是我不懂任何 JavaScript。代码中的所有 JavaScript 都是从堆栈溢出和其他来源复制的。我唯一知道如何使用的是 HTML，而且我还是很新。（它可能还包括一些我也不知道的 CSS）

 是个失败的东西，所以请忽略它，哈哈。

<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() {
            var hydrationLevel = hydrationLevel + 1
            document.getElementById("hydrationLevelDisplay").value = "Hydration Level: " + hydrationLevel;
            document.title = "Hydration Level: " + hydrationLevel;
    }
</script>
</body>
</html>

【问题讨论】：

删除var 中的var hydrationLevel = hydrationLevel + 1。
您声明了两个具有相同名称的变量。去掉hydrationLevel的第二个声明前面的var
也可以hydrationLevel++;
我没有尝试声明另一个变量。我只是想编辑变量。

标签： javascript html css nan

【解决方案1】：

创建一个按钮 -> id:btn 创建结果 div 或 p 或 h1 -> id:hydrationLevel

选择按钮，添加事件监听

document.getElementById('btn').addEventListener('click', incrementLevel)
let hydrationCount = 0;

function incrementLevel() {
 hydrationCount += 1;
 document.getElementById('hydrationLevel').textContent = hydrationCount;
}

我鼓励您以这种方式使用事件侦听器。不是内联这就是我提供此解决方案的原因。

【讨论】：

我还没有听说过事件监听器，我会调查一下谢谢！

【解决方案2】：

你已经在函数外声明了hydrationLevel，所以不需要重新声明它。换个方式，

var hydrationLevel = hydrationLevel + 1

到

hydrationLevel = hydrationLevel + 1

【讨论】：

非常感谢！花了一个小时想弄明白！
当然，这应该被投票关闭为重复或错字......而不是回答？！？
@devlincarnate 你知道更好是有道理的
我在 JS 方面很糟糕，并试图编辑变量。我想我需要再次输入 var。