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 class="slide">
<div id="text1">
<h2>Orca
</h2>
<p>Orcinus Orca<br><span class="small">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 class="slide">
<div id="text2">
<h2>Common Bottlenose Dolphin
</h2>
<p>Tursiops Truncatus<br><span class="small">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 class="slide">
<div id="text3">
<h2>Indo Pacific Humpback Dolphin
</h2>
<p>Sousa Chinensis<br><span class="small">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 class="slide">
<div id="text4">
<h2>Pacific White-Sided Dolphin
</h2>
<p>Lagenorhynchus Obliquidens<br><span class="small">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 class="slide">
<div id="text5">
<h2>Dusky Dolphin
</h2>
<p>Lagenorhynchus Obscurus<br><span class="small">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 class="slide">
<div id="text6">
<h2>Atlantic Spotted Dolphin
</h2>
<p>Stenella Frontalis<br><span class="small">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 class="slide">
<div id="text7">
<h2>Atlantic White-Sided Dolphin
</h2>
<p>Lagenorhynchus Acutus<br><span class="small">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 class="slide">
<div id="text8">
<h2>Peale's Dolphin
</h2>
<p>Lagenorhynchus Australis<br><span class="small">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 class="slide">
<div id="text9">
<h2>Heaviside's Dolphin
</h2>
<p>Cephalorhynchus Heavisidii<br><span class="small">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 class="slide">
<div id="text10">
<h2>Yangtze River Dolphin
</h2>
<p>Lipotes Vexillifer<br><span class="small">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!
1 Answer 1
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 ([])
1 Comment
.Math.random().
getElementById. You're using an array to index into it.getElementById(String: id)only accept a string as argument. Either you callgetElementsByClassNameand take 1st and 2nd elements, or you callgetElementByIdmultiple times for each image and text.