Array returning as undefined-CodePudding

I'm doing an assignment where I have to make a slideshow using images, arrays, and some sort of timing feature of my choice, I'm getting stuck with the arrays because they keep returning as undefined whenever I use getElementById and from what I know it's because it thinks the id's don't exist even though they do, I'm not sure what the problem is and I can't move on and figure out the rest of the code because I can't get past this one thing.

Warning in advance, I'm pretty bad at coding JavaScript so this is probably going to look horribly wrong, but that's part of learning.

JavaScript:

let slides = document.getElementById[ 
    ["img1", "text1"],
    ["img2", "text2"],
    ["img3", "text3"],
    ["img4", "text4"],
    ["img5", "text5"],
    ["img6", "text6"],
    ["img7", "text7"],
    ["img8", "text8"],
    ["img9", "text9"],
    ["img10", "text10"]];
function slideShow() {
    for (let i = 0; i < slides.length; i  ) {
        for (let j = 0; j < slides[i].length; j  ) {
            setTimeout( function() {
                slides.style.display = slides[i][j].Math.random()*11;
            }, 3000);
        }
    }
}
slideShow();

Html to show that the id's do in fact exist:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>14_A_03
        </title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="14_A_03.css">
    </head>
<body>
    <div id="slideshow">
        <div >
            <div id="text1">
                <h2>Orca
                    </h2>
                <p>Orcinus Orca<br><span >Data Deficient</span>
                    </p>
                </div>
            <div id="img1">
                <img src="images/img-1-orca.jpg" width="600" alt="Orca jumping out of the water">
                </div>
            </div>
        <div >
            <div id="text2">
                <h2>Common Bottlenose Dolphin
                    </h2>
                <p>Tursiops Truncatus<br><span >Least Concern</span>
                    </p>
                </div>
            <div id="img2">
                <img src="images/img-2-common-bottlenose.jpg" width="600" alt="Two Common Bottlenose Dolphins swimming underwater together">
                </div>
            </div>
        <div >
            <div id="text3">
                <h2>Indo Pacific Humpback Dolphin
                    </h2>
                <p>Sousa Chinensis<br><span >Vunerable</span>
                    </p>
                </div>
            <div id="img3">
                <img src="images/img-3-indo-pacific-humpback.jpg" width="600" alt="Indo Pacific Humpback Dolphin jumping out of the water">
                </div>
            </div>
        <div >
            <div id="text4">
                <h2>Pacific White-Sided Dolphin
                    </h2>
                <p>Lagenorhynchus Obliquidens<br><span >Least Concern</span>
                    </p>
                </div>
            <div id="img4">
                <img src="images/img-4-pacific-whitesided.jpg" width="600" alt="Two Pacific White-Sided Dolphins jumping out of the water together">
                </div>
            </div>
        <div >
            <div id="text5">
                <h2>Dusky Dolphin
                    </h2>
                <p>Lagenorhynchus Obscurus<br><span >Data Deficient</span>
                    </p>
                </div>
            <div id="img5">
                <img src="images/img-5-dusky.jpg" width="600" alt="Dusky Dolphin jumping out of the water">
                </div>
            </div>
        <div >
            <div id="text6">
                <h2>Atlantic Spotted Dolphin
                    </h2>
                <p>Stenella Frontalis<br><span >Data Deficient</span>
                    </p>
                </div>
            <div id="img6">
                <img src="images/img-6-atlantic-spotted.jpg" width="600" alt="Two Atlantic Spotted Dolphins swimming underwater together">
                </div>
            </div>
        <div >
            <div id="text7">
                <h2>Atlantic White-Sided Dolphin
                    </h2>
                <p>Lagenorhynchus Acutus<br><span >Least Concern</span>
                    </p>
                </div>
            <div id="img7">
                <img src="images/img-7-atlantic-whitesided.jpg" width="600" alt="Atlantic White-Sided Dolphin jumping out of the water">
                </div>
            </div>
        <div >
            <div id="text8">
                <h2>Peale's Dolphin
                    </h2>
                <p>Lagenorhynchus Australis<br><span >Data Deficient</span>
                    </p>
                </div>
            <div id="img8">
                <img src="images/img-8-peales.jpg" width="600" alt="Peale's Dolphin jumping out of the water">
                </div>
            </div>
        <div >
            <div id="text9">
                <h2>Heaviside's Dolphin
                    </h2>
                <p>Cephalorhynchus Heavisidii<br><span >Data Deficient</span>
                    </p>
                </div>
            <div id="img9">
                <img src="images/img-9-heavisides.jpg" width="600" alt="Two Heaviside's Dolphins jumping out of the water">
                </div>
            </div>
        <div >
            <div id="text10">
                <h2>Yangtze River Dolphin
                    </h2>
                <p>Lipotes Vexillifer<br><span >Critically Endangered / Possibly Extinct</span>
                    </p>
                </div>
            <div id="img10">
                <img src="images/img-10-baiji.jpg" width="600" alt="Yangtze River Dolphin looking through the surface of the water">
                </div>
            </div>
        </div>
    <script src="14_A_03.js"></script>
    </body>
</html>

I've tried quite a few different solutions but I just can't get past the array returning as undefined and since it's required in the assignment I need to make sure it doesn't keep happening.

Edit Okay that was fast, problem solved, thanks for everyone's help!

CodePudding user response：

document.getElementById only takes one argument, so if you want to call it for each value in your 2d array, you should use:

let slides = [
    ["img1", "text1"],
    ["img2", "text2"],
    ["img3", "text3"],
    ["img4", "text4"],
    ["img5", "text5"],
    ["img6", "text6"],
    ["img7", "text7"],
    ["img8", "text8"],
    ["img9", "text9"],
    ["img10", "text10"]].map(
      (item) => [
         document.getElementById(item[0]), 
         document.getElementById(item[1])
      ]
    );

Also note that calling a function requires you to use round brackets (()) and not square brackets ([])