Quise aplicar lo aprendido haciendo un juego. Además de lo visto hasta ahora, tuve que investigar un par de funciones para que quedara como quería.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Las escondidas</title>
</head>
<body>
<h1>Las escondidas</h1>
<p>¿Cómo se llama tu mascota?</p>
<input>
<button class="nombre">¡A jugar!</button>
<br>
<br>
<br>
<button class="perdedor1">O</button>
<button class="perdedor2">O</button>
<button class="perdedor3">O</button>
<button class="perdedor4">O</button>
<button class="perdedor5">O</button>
<br>
<br>
<button class="perdedor6">O</button>
<button class="perdedor7">O</button>
<button class="perdedor8">O</button>
<button class="perdedor9">O</button>
<button class="perdedor10">O</button>
<br>
<br>
<button class="perdedor11">O</button>
<button class="perdedor12">O</button>
<button class="perdedor13">O</button>
<button class="perdedor14">O</button>
<button class="perdedor15">O</button>
<br>
<br>
<button class="perdedor16">O</button>
<button class="ganador">O</button>
<button class="perdedor17">O</button>
<button class="perdedor18">O</button>
<button class="perdedor19">O</button>
<br>
<br>
<button class="perdedor20">O</button>
<button class="perdedor21">O</button>
<button class="perdedor22">O</button>
<button class="perdedor23">O</button>
<button class="perdedor24">O</button>
</body>
</html>
<script>
var input = document.querySelector("input");
var buttonNombre = document.querySelector("button.nombre");
buttonNombre.onclick = escribirInstruccion;
function escribirInstruccion () {
alert(input.value + " se escondió en un botón. Elige uno y veamos si lo encontraste.");
};
function mensajeGanador() {
alert("¡Encontraste a " + input.value + "!");
};
(document.querySelector("button.ganador")).onclick = mensajeGanador;
function deshabilitarBoton(boton) {
var buttonPerdedor = document.querySelector(boton);
buttonPerdedor.textContent = "X";
};
(document.querySelector("button.perdedor1")).onclick = () => deshabilitarBoton("button.perdedor1");
(document.querySelector("button.perdedor2")).onclick = () => deshabilitarBoton("button.perdedor2");
(document.querySelector("button.perdedor3")).onclick = () => deshabilitarBoton("button.perdedor3");
(document.querySelector("button.perdedor4")).onclick = () => deshabilitarBoton("button.perdedor4");
(document.querySelector("button.perdedor5")).onclick = () => deshabilitarBoton("button.perdedor5");
(document.querySelector("button.perdedor6")).onclick = () => deshabilitarBoton("button.perdedor6");
(document.querySelector("button.perdedor7")).onclick = () => deshabilitarBoton("button.perdedor7");
(document.querySelector("button.perdedor8")).onclick = () => deshabilitarBoton("button.perdedor8");
(document.querySelector("button.perdedor9")).onclick = () => deshabilitarBoton("button.perdedor9");
(document.querySelector("button.perdedor10")).onclick = () => deshabilitarBoton("button.perdedor10");
(document.querySelector("button.perdedor11")).onclick = () => deshabilitarBoton("button.perdedor11");
(document.querySelector("button.perdedor12")).onclick = () => deshabilitarBoton("button.perdedor12");
(document.querySelector("button.perdedor13")).onclick = () => deshabilitarBoton("button.perdedor13");
(document.querySelector("button.perdedor14")).onclick = () => deshabilitarBoton("button.perdedor14");
(document.querySelector("button.perdedor15")).onclick = () => deshabilitarBoton("button.perdedor15");
(document.querySelector("button.perdedor16")).onclick = () => deshabilitarBoton("button.perdedor16");
(document.querySelector("button.perdedor17")).onclick = () => deshabilitarBoton("button.perdedor17");
(document.querySelector("button.perdedor18")).onclick = () => deshabilitarBoton("button.perdedor18");
(document.querySelector("button.perdedor19")).onclick = () => deshabilitarBoton("button.perdedor19");
(document.querySelector("button.perdedor20")).onclick = () => deshabilitarBoton("button.perdedor20");
(document.querySelector("button.perdedor21")).onclick = () => deshabilitarBoton("button.perdedor21");
(document.querySelector("button.perdedor22")).onclick = () => deshabilitarBoton("button.perdedor22");
(document.querySelector("button.perdedor23")).onclick = () => deshabilitarBoton("button.perdedor23");
(document.querySelector("button.perdedor24")).onclick = () => deshabilitarBoton("button.perdedor24");
</script>
