Im trying to recreate a version of wordle with my own code, and i have each letter set as its own input in html, im using a nested for loop to check to see whether the letter at a certain input is the same as the letter in the correct word and then highlighting it green. My for loop looks like this:
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 the jump001 thats just to automove to next input when the user enters a character. Each square that I have defined represents one input, but I can't seem to change the background color of the input box with my last line of code, the only thing I can do is select individual inputs by doing:
document.getElementById("square3").style.backgroundColor = 'green';
but if I do this, the loop is useless, it seems as though I can't use the array in my first line to get through the HTML input elements, is there any way I can edit style in the loop using my rowIndex1 array?
I appreciate all the help
You need to break the string into an array to loop it.
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';
}
}
}
This supposes that you have <input id="square3" />
What i would do is modify the input ID and run a single loop
<input id="tile_s" />
this way you can use just one loop without a comparative.
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">why you are looping answer = "shorts" while its just a single string ?
also you have to give us more of the code to see what those rowIndex1 are referring to and how they are being setup
but assuming they are ID's of inputs you could do this ( 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">To compare each character, you first need to call .split('') on the answer string to turn it into an array of single characters. Then in a single loop, in each iteration you have the index of each item to compare is the same (rowIndex1[i] vs. answer[i]).
The following snippet will highlight each input that has the correct letter for its position:
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">