Assign element from array to each table cell

Question

I have 25 table cells and an array that randomizes values. I want to assign each value to a cell from the table.

I think that my main issue is in the following line:

for (i = 0; i < tablecells.length; i++) { 
        tablecells.innerHTML = BingoSquares.pop();
    };

What is the mistake in the above loop? Rest of code is shown below just in case its needed.

Thank you in advance

var overlay = document.getElementById('loginoverlay');
var tablecells = document.getElementsByTagName('td');

BingoSquares=["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "1", "2", "3"];



function hideOverlay(){
    overlay.style.opacity = 0;
    setTimeout(function(){
        overlay.style.display = "none"; 
    }, 1000);
};

function newCard() {
    //shuffle array:
    BingoSquares.sort(function(){
        return Math.round(Math.random());
    });

    console.log(BingoSquares.pop());


    for (i = 0; i < tablecells.length; i++) { 
        tablecells.innerHTML = BingoSquares.pop();
    };

};

document.getElementById('newsubmit').onclick = function() {
    hideOverlay();
    newCard();
};

Future reference, your console.log(BingoSquares.pop()) actually pops the array so if your array was length 25 and you do the above, you will now be at length 24 since you just popped your last element out of the array. — Matt
– Matt, Commented Dec 26, 2017 at 15:45

Peter B · Accepted Answer · 2017-12-26 15:43:28Z

1

You need to index the elements from the array, by using tablecells[i]:

tablecells[i].innerHTML = BingoSquares.pop();

answered Dec 26, 2017 at 15:43

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Assign element from array to each table cell

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related