Estoy tratando de recrear una versión de wordle con mi propio código, y tengo cada letra configurada como su propia entrada en html, estoy usando un bucle for anidado para verificar si la letra en cierta entrada es la misma que la letra en la palabra correcta y luego resaltándola en verde. Mi ciclo for se ve así:
rowIndex1 = [square1, square2, square3, square4, square5, square6] answer = "shorts" for (let i = 0; i < rowIndex1.length; i++) { for (let j = 0; j < answer.length; j++) { if (rowIndex1[i] == answer[j]){ rowIndex1[i].style.backgroundColor = 'green'; } } } <section id="row1"> <input type="text" maxlength="1" style="font-size: 30px; color: white; text-align: center;" onkeyup = "jump001(this, 'square2')" id ="square1" > <input type="text" maxlength="1" style="font-size: 30px; color: white; text-align: center;" onkeyup = "jump001(this, 'square3')" id ="square2" > <input type="text.css" maxlength="1" style="font-size: 30px; color: white; text-align: center;" onkeyup = "jump001(this, 'square4')" id ="square3" > <input type="text.css" maxlength="1" style="font-size: 30px; color: white; text-align: center;" onkeyup = "jump001(this, 'square5')" id ="square4" > <input type="text.css" maxlength="1" style="font-size: 30px; color: white; text-align: center;" onkeyup = "jump001(this, 'square6')" id ="square5" > <input type="text.css" maxlength="1" style="font-size: 30px; color: white; text-align: center;" onkeyup = "jump001(this, 'square1')" id ="square6" > </section>Ignore el jump001 que es solo para pasar automáticamente a la siguiente entrada cuando el usuario ingresa un carácter. Cada cuadrado que he definido representa una entrada, pero parece que no puedo cambiar el color de fondo del cuadro de entrada con mi última línea de código, lo único que puedo hacer es seleccionar entradas individuales haciendo lo siguiente:
document.getElementById("square3").style.backgroundColor = 'green'; pero si hago esto, el bucle es inútil, parece que no puedo usar la matriz en mi primera línea para pasar por los elementos de entrada HTML, ¿hay alguna forma de que pueda editar el estilo en el bucle usando mi matriz rowIndex1 ?
Yo aprecio toda la ayuda
Debe dividir la cadena en una matriz para hacer un bucle.
rowIndex1 = [square1, square2, square3, square4, square5, square6] answer = "shorts" const answerArray = answer .split(""); for (let i = 0; i < rowIndex1.length; i++) { for (let j = 0; j < answerArray .length; j++) { if (rowIndex1[i] == answerArray [j]){ document.getElementById(rowIndex1[i]).style.backgroundColor = 'green'; } } } Esto supone que tienes <input id="square3" />
Lo que haría es modificar la ID de entrada y ejecutar un solo ciclo
<input id="tile_s" />de esta manera puede usar solo un bucle sin una comparativa.
answer = "shorts" const answerArray = answer .split(""); for (let j = 0; j < answerArray .length; j++) { let elem = document.getElementById("tile_"+answerArray [j]); if(typeof elem !== 'undefined' && elem !== null) { elem.style.backgroundColor = 'green'; } } <input id="tile_a" value="a"> <input id="tile_o" value="o"> <input id="tile_c" value="c"> <input id="tile_s" value="s"> <input id="tile_z" value="z"> <input id="tile_m" value="m">¿Por qué estás answer = "shorts" mientras es solo una cadena?
también tiene que darnos más código para ver a qué se refieren esos rowIndex1 y cómo se están configurando
pero suponiendo que sean ID de entradas, puede hacer esto ( press on RunCode bellow to see the result ):
var rowIndex1 = ['square1', 'square2', 'square3', 'square4', 'square5', 'square6']; var answer = "shorts"; for (let i = 0; i < rowIndex1.length; i++) { var input = document.getElementById(rowIndex1[i]); if (input.value == answer){ input.style.backgroundColor = 'green'; } } <input id="square1" value=""> <input id="square2" value="shorts"> <input id="square3" value=""> <input id="square4" value="shorts"> <input id="square5" value=""> <input id="square6" value="long">Para comparar cada carácter, primero debe llamar a .split('') en la cadena de respuesta para convertirla en una matriz de caracteres individuales. Luego, en un solo bucle, en cada iteración tiene el mismo índice de cada elemento para comparar ( rowIndex1[i] vs. answer[i] ).
El siguiente fragmento resaltará cada entrada que tenga la letra correcta para su posición:
var rowIndex1 = ['square1', 'square2', 'square3', 'square4', 'square5', 'square6']; var answer = "shorts".split(''); for (let i = 0; i < rowIndex1.length; i++) { var input = document.getElementById(rowIndex1[i]); if (input.value == answer[i]) { input.style.backgroundColor = 'green'; } } input { width: 1em; text-align: center; } <input id="square1" value="s"> <input id="square2" value="h"> <input id="square3" value="t"> <input id="square4" value="r"> <input id="square5" value="o"> <input id="square6" value="z">