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

Posted 2023-03-11

技术标签:

【中文标题】我试图在单击和返回 NaN 时增加一个值 [重复]【英文标题】：I'm trying to increase a value when clicking and value returning NaN [duplicate] 【发布时间】：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" ></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++; 我没有尝试声明另一个变量。我只是想编辑变量。 【参考方案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，所以不需要重新声明它。换个方式，