Tengo una matriz que incluye 6 entradas de mi Html.
<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;" id ="square6" >la matriz en JS se ve así
var rowIndex1 = [square1, square2, square3, square4, square5, square6]Ya definí cada cuadrado como square1 = document.getElementById("square1"). value mi único problema es que cuando quiero cambiar el color de la entrada, trato de hacer algo como esto:
rowIndex1[i].style.backgroundColor = 'green';Lo tengo configurado de esta manera porque quiero hacer un bucle y hacer que pase por cada entrada y cambie el color en consecuencia, pero si no llamo a un cuadrado específico, entonces el color no cambia. ¿Hay alguna forma de cambiar el color usando el código que usé arriba?
document.getElementById('#'+rowIndex1[i]).style.backgroundColor = 'green';Cadena de concatenación como #cuadrado1,#cuadrado2,#cuadrado3,...
Edit
En matriz estás almacenado como
square1 = document.getElementById("square1").value;cambiar a esto
square1 = document.getElementById("square1");Simplemente almacena el elemento en arr
Después de que puedas usar cualquier lugar
Al igual que
rowIndex1[i].style.backgroundColor = "green";puedes intentarlo de esta manera:
let rowIndex1 = ['square1', 'square2', 'square3', 'square4', 'square5', 'square6']; rowIndex1.forEach(el => document.getElementById(el).style.backgroundColor = 'green') .b1 { font-size: 30px; color: white; text-align: center; } <input type="text" class="b1" maxlength="1" id ="square1"> <input type="text" class="b1" maxlength="1" id ="square2"> <input type="text" class="b1" maxlength="1" id ="square3"> <input type="text" class="b1" maxlength="1" id ="square4"> <input type="text" class="b1" maxlength="1" id ="square5"> <input type="text" class="b1" maxlength="1" id ="square6">