Estoy tratando de codificar un mini juego. El juego tiene dos casillas en las que puedes hacer clic. A las casillas se les asigna un número aleatorio entre 1 y 2.
Cuando comienza el juego, tienes 5 vidas. Estas vidas se representan como 5 imágenes de un pequeño ser humano.
Cuando el jugador obtiene 3,5 y 7 puntos correctos, obtienes una vida extra. que he logrado.
Ahora estoy tratando de restar una vida cada vez que el jugador hace clic en el cuadro equivocado.
function setRandomNumber() { randomNumber = Math.floor(Math.random() * 2 + 1); if (randomNumber === 1) { numberOfRightAnswersSpan.innerHTML = `${++correctNumber}`; outputDiv.innerHTML = `Det er riktig svar.`; if (correctNumber === 3 || correctNumber === 5 || correctNumber === 7) { numberOfLivesDiv.innerHTML += `<img src="images/person1.jpg"/>` } } else { numberOfWrongAnswersSpan.innerHTML = `${++wrongNumber}`; outputDiv.innerHTML = `Det er feil svar.`; } }Hice algunos cambios en su código, pero traté de mantenerlo bastante similar a su original. Cambié los literales de su plantilla a cadenas. Cambié sus modificaciones .innerHTML a modificaciones .innerText . Refactoricé algunos espacios en blanco para que su declaración if sea más legible. En lugar de agregar el elemento img agregando la cadena html, utilicé el método .appendChild y el método createElement para crear los elementos img. También agregué una clase al elemento para que sea más fácil de capturar más tarde.
function setRandomNumber() { randomNumber = Math.floor(Math.random() * 2 + 1); if (randomNumber === 1) { numberOfRightAnswersSpan.innerText = ++correctNumber; outputDiv.innerText = "Det er riktig svar."; if ( correctNumber === 3 || correctNumber === 5 || correctNumber === 7 ) { const newLife = document.createElement("img"); newLife.src = "images/person1.jpg"; newLife.classList.add("life"); numberOfLivesDiv.appendChild(newLife); } } else { numberOfWrongAnswersSpan.innerText = ++wrongNumber; outputDiv.innerText = "Det er feil svar."; const aLife = document.querySelector(".life"); aLife.remove(); } }Es importante señalar en este punto que no hay lógica para comprobar cuántas vidas existen, o qué hacer cuando se acaban las vidas. Eventualmente puede encontrar un error porque no hay un elemento con una clase de vida.
Volvería a renderizar las vidas cada vez que cambie el número de vidas.
let number_of_lives = 5; const lives_container = document.getElementById("user-lives"); function draw_lives(){ lives_container.innerHTML = ""; for(let i = 0; i < number_of_lives; i++){ const img = document.createElement("img"); img.setAttribute("alt", "life.png"); const new_life = img; lives_container.appendChild(new_life); }; if(number_of_lives <= 0) lives_container.innerText = number_of_lives; }; function remove_life() { number_of_lives--; draw_lives(); }; function add_life() { number_of_lives++; draw_lives(); }; draw_lives(); #user-lives > * { margin: 10px; background: #7f7; } <div id="user-lives"></div> <button onclick="add_life();">Add life</button> <button onclick="remove_life();">Remove life</button>