我试图在点击时增加一个值并返回 NaN

Question

我尝试了很多东西，但是我什么都不知道 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>

Answer 1

您已经在函数外声明了 hydrationLevel，因此不需要重新声明它。只是改变，

var hydrationLevel = hydrationLevel + 1

至

hydrationLevel = hydrationLevel + 1

Answer 2

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

select按钮，添加事件监听器

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

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

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

我试图在点击时增加一个值并返回 NaN

I'm trying to increase a value when clicking and value returning NaN

javascript

html

css

nan