I am building a clone of the popular game, 4 pics 1 word and I have an issue I am battling with. As shown in the image, I want to populate the empty boxes with each alphabet clicked from the alphabet options below it.

The issue now is that for each time I click the alphabets, only the first box gets updated. The other three never gets updated. How do I go about it? I can apccess each box by using childNode[index].

morzook:
I am building a clone of the popular game, 4 pics 1 word and I have an issue I am battling with. As shown in the image, I want to populate the empty boxes with each alphabet clicked from the alphabet options below it.

The issue now is that for each time I click the alphabets, only the first box gets updated. The other three never gets updated. How do I go about it? I can apccess each box by using childNode[index].

You could store the values of the letters you clicked in an array, and then map it onto the boxes, everytime you click the letters, run a function to map it, this is the easiest solution I could give off head

First , the values for the boxes should be stored and read from an array.
Secondly, I believe your alphabets are also stored and read from array of objects (with id and value properties) that you map through adding a click event that runs the function above ,the id from the object and then creating an <li> tag that contains the alphatbet.
Lastly you need a function should get the e.target.value or map through ur array of alphabets to get the alphabet clicked and then also map through you array of boxes to add the alphabet clicked.
If you didnt understand the above explanation. Maybe you should take a screenshot so we see exactly where the bug is.

It’s because you didn’t increment the index of your box.

jbreezy:
It’s because you didn’t increment the index of your box.

If he increments the index of the box. I think its going to get that particular index and still leave out the rest

1. Store ur boxes in array

On button of ur text click loop and check the box arrray n if the first array box value length is greater than 1 since each box can only hold one value.

if the first box in the array is greater than one.... Now move to the next box in the array and let it have the value of the clicked event...

if all your boxes are filled simply add return to stop ur function from doing anything else.


If u remove or edit out a value from any box set the box value on change to 0;.

ur app should work well now

display your code

How are you people debugging without seeing the code?

Are you guys witches?

Op, getat!

Even stackoverflow or any other dev forum would always recommend you show some piece of code. An example of what you've attempted that's not working for you.

LikeAking:
Op, getat!

wetin he do you now?