0

this is minimal js, everything else is commented. I cannot understand why "cards[i]"(first one in the for loop) has a red squiggly line under it, I cannot run any console commands. Please help!

    let cards=document.querySelectorAll(".blocks");
    let pic,card,rand;
    let finals = [];
    const count = 10; 
    const max = 9;
    
    for(let k = 0; k < 1000; k++){
      rand = Math.round(Math.random() * max);
    //   !finals.includes(rand) && finals.push(rand)
      if(!finals.includes(rand))
      finals.push(rand);
    }
    finals = finals.slice(0, count)
    setupCards(finals);
    
    function setupCards(arr){
        
        for(let i=0;i<=arr.length;i++){
    ====>cards[i].style.backgroundImage=`url(images/${arr[i]}.jpg)`;
        // cards[i].style.transform="rotateY(180deg)";
        // cards[i].style.backgroundImage="url(images/back6.jpg)";             
     }
}
Ash Sharma
  • 31
  • 6
  • `i<=arr.length` indicates an off-by-one error; see [What is an off-by-one error and how do I fix it?](/q/2939869/4642212). Another thing: is your ` – Sebastian Simon Dec 30 '21 at 09:49
  • Please share the corresponding HTML, CSS code. – kiner_shah Dec 30 '21 at 09:50

1 Answers1

1

In this condition test:

for(let i=0;i<=arr.length;i++){

you are letting the i go from zero (which is the index of the first element) to the length of the array (which gets you to the last plus 1 element - which doesn't exist).

Try:

  for(let i=0;i<arr.length;i++){
A Haworth
  • 30,908
  • 4
  • 11
  • 14