I have an array that includes 6 inputs from my 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" >
the array in JS looks like this
var rowIndex1 = [square1, square2, square3, square4, square5, square6]
I've already defined each square as square1 = document.getElementById("square1").value my only issue is that when I want to change the color of the input, I try to do something like this:
rowIndex1[i].style.backgroundColor = 'green';
I have it set up like this because I want to loop it and get it to go through each input and change the color accordingly, but if I don't call a specific square then the color doesn't change. Is there any way to change the color using the code I used above?
document.getElementById('#'+rowIndex1[i]).style.backgroundColor = 'green';
Concat string like #square1,#square2,#square3,...
Edit
In array you are store like
square1 = document.getElementById("square1").value;
Change to this
square1 = document.getElementById("square1");
You just store element in arr
After you can use any where
Just like
rowIndex1[i].style.backgroundColor = "green";
you can try it this way:
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">