Cuando el contador de clics llegue a 69, debería mostrar "Nice" en el h4 a continuación, pero solo puedo hacer que muestre el mensaje de "error" else (el mensaje else debe estar en blanco " " pero para probar, puse un mensaje)
HTML
<button type="button" onclick="myFunction()"> Clic to count +1 </button> <h4 id="demo"> 0 </h4> <h4 id="secret"> </h4>JavaScript
const add = (function () { let counter = 60; return function () {counter += 1; return counter;} } )(); function myFunction(){ document.getElementById("demo").innerHTML = add(); if (add == 69){ document.getElementById("secret").innerHTML = "Nice"; }else{ document.getElementById("secret").innerHTML = "error"; } }El valor inicial del contador es 60 para que sea más rápido probar
Tu enfoque no está nada mal. Deberá almacenar el valor del contador fuera de la función; de lo contrario, se restablecerá a 60 cada vez que se haga clic en el botón. Además, simplificaría la función hell. Su variable add contiene una función que devuelve una función. Esto también funciona, pero es un dolor de leer. Siempre trate de enfocarse en menos complejidad pero más legibilidad.
let counter = 60; document.getElementById("demo").innerHTML = counter function add() { counter += 1; return counter; } function myFunction(){ let counterAfterAdding = add(); document.getElementById("demo").innerHTML = counterAfterAdding if (counterAfterAdding === 69){ document.getElementById("secret").innerHTML = "Nice"; } else { document.getElementById("secret").innerHTML = "error"; } } <button type="button" onclick="myFunction()"> Click to count +1 </button> <h4 id="demo"> 0 </h4> <h4 id="secret"> </h4>Esto debería funcionar:
const add = (function() { let counter = 60; return function() { counter += 1; return counter; } })(); function myFunction() { document.getElementById("demo").innerHTML = add(); if (document.getElementById("demo").innerHTML == 69) { document.getElementById("secret").innerHTML = "Nice"; } else { document.getElementById("secret").innerHTML = "error"; } } <button type="button" onclick="myFunction()"> Clic to count +1 </button> <h4 id="demo"> 0 </h4> <h4 id="secret"> </h4> add es una función, cuando la llamas, vuelve a hacer counter += 1 . Entonces, en su lugar, también evite crear una variable global como sugirió Amir Saleem, puede comparar directamente lo que hay en el contenido del elemento o hacer que una variable cuente como la publicación de Amir Saleem.
¿Qué es agregar?
add es una función, así que cuando hagas console.log(add) mostrará algo como ƒ () {counter += 1; return counter;}
como add es una función nunca puede ser igual a 69 .
Cuando llama a add , actualiza el valor del contador y devuelve lo mismo. Puede almacenar el valor devuelto por la función add
const newCounter = add(); // whatever is returned by the add is stored in this variable
Ahora puede hacer la comparación con el valor almacenado en una variable newCounter como newCounter === 69
Aquí está el fragmento actualizado:
const add = (function () { let counter = 60; return function () {counter += 1; return counter;} } )(); function myFunction(){ const count = add(); document.getElementById("demo").innerHTML = count; if (count == 69){ document.getElementById("secret").innerHTML = "Nice"; } else{ document.getElementById("secret").innerHTML = "error"; } } <button type="button" onclick="myFunction()"> Click to count +1 </button> <h4 id="demo"> 0 </h4> <h4 id="secret"> </h4>