Estoy haciendo un juego de clicker inactivo por diversión, todo iba bien hasta que encontré un problema.
Lo que básicamente quiero que suceda es que cuando se hace clic en la imagen y el elemento clickCounter está sobre uno, se crea el nuevo elemento de imagen. Aquí no hay problema, el principal problema es guardar la imagen. Si el usuario actualiza la página, quiero que el elemento creado siga allí . Intenté usar HTML externo y seguir algunas otras preguntas del foro de desbordamiento de pila, pero nunca pude obtener una solución adecuada para este problema en particular. También probé localStorage y cookies , pero creo que las estoy usando mal.
Mi código está a continuación, mi sololearn se vinculará a continuación, que consiste en el código completo de mi proyecto.
function oneHundThou() { var countvar = document.getElementById("clickCounter") if(document.getElementById("clickCounter").innerHTML > 1) { alert("Achievement! 1 pat!") var achievement1k = document.createElement("img"); // create a cookie so when the user refreshes the page, the achievement is shown again document.cookie = "achievement1k=true"; achievement1k.src = "https://c.pxhere.com/images/f2/ec/a3fcfba7993c96fe881024fe21e7-1460589.jpg!d"; achievement1k.style.height = "1000px" achievement1k.style.width = "1000px" achievement1k.style.backgroundColor = "red" document.body.appendChild(achievement1k); oneHundThou = function(){}; // emptying my function after it is run once instead of using a standard switch statement } else { return } } oneHundThou();Soy consciente de que hay otra publicación similar a esta, sin embargo, mi respuesta no pudo ser respondida en esa publicación.
El código completo está aquí: https://code.sololearn.com/Wwdw59oenFqB ¡Por favor ayuda! Gracias. (:
En lugar de almacenar la imagen, intente almacenar el innerHTML y luego cree la imagen al cargar el documento:
function oneHundThou() { countvar.innerHTML = localStorage.getItem('clickCount') ? localStorage.getItem('clickCount') : 0; //before if //original code localStorage.setItem('clickCount', countvar.innerHTML); //instead of doc.cookie } window.addEventListener('DOMContentLoaded', (event) => { oneHundThou(); }); o, si no le importa que clickCounter pueda inicializarse como null , puede eliminar el ? : y solo pon
countvar.innerHTML = localStorage.getItem('clickCount'); Editar: código abreviado con la variable countvar