He intentado muchas cosas, sin embargo, no sé nada de JavaScript. Todo el JavaScript en el código se copia del desbordamiento de pila y otras fuentes. Lo único que sé usar es HTML y todavía soy muy nuevo. (también podría incluir algo de CSS que tampoco conozco en absoluto)
El <!--<button id="bigButton" onclick="bigBottlePress()"><img src="Images/BigBottle.png"></button>--> es algo fallido, así que ignóralo jajaja.
<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>Ya ha declarado hydrationLevel fuera de la función, por lo que no necesita volver a aclararlo. Solo cambia,
var hydrationLevel = hydrationLevel + 1a
hydrationLevel = hydrationLevel + 1crear un botón -> id:btn crear un resultado div o p o h1 -> id:hydrationLevel
seleccione el botón, agregue el detector de eventos
document.getElementById('btn').addEventListener('click', incrementLevel) let hydrationCount = 0; function incrementLevel() { hydrationCount += 1; document.getElementById('hydrationLevel').textContent = hydrationCount; }Te animo a usar detectores de eventos de esta manera. no en línea, es por eso que proporcioné esta solución.