I'm trying to increase a value when clicking and value returning NaN [duplicate]-CodePudding

I've tried a lot of stuff, however I don't know any JavaScript. All of the JavaScript in the code is copied from stack overflow and other sources. The only thing I know how to use is HTML and I'm still very new. (it might also include some CSS which I also don't know at all)

The  is a failed thing so ignore it lol.

<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>

CodePudding user response：

You have already declared hydrationLevel outside function, so don't need to redclare it. Just change,

var hydrationLevel = hydrationLevel   1

hydrationLevel = hydrationLevel   1

CodePudding user response：

create a button -> id:btn create a result div or p or h1 -> id:hydrationLevel

select the button, add event listener

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

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

I'd encourage you to use event listeners this way. not inline that's why I provided this solution.