I am new to javascript and I am trying to create a slideshow inside divs. However when I do it give me the error message
Uncaught TypeError: Cannot read property 'style' of undefined at slideshow (script.js:14) at script.js:1
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="script.js"></script>
<div id="wrapper">
<div id="content">
<div id="top">
<img class="slide" src="1.png" style="width:100%">
<img class="slide" src="2.png" style="width:100%">
</div>
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
</div>
</div>
</body>
</html>
This is my CSS code:
.slide {
display:none;
}
This is my Javascript code:
slideshow();
function slideshow() {
var index = 0;
var i;
var slides = document.getElementsByClassName("slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
index++;
if (index > slides.length) {
index = 1;
}
slides[index-1].style.display = "block";
setTimeout(slideshow, 2000);
}
I think the problem is that the javascript cannot access the images when they are in the div.
I am new to javascript and I am trying to create a slideshow inside divs. However when I do it give me the error message
Uncaught TypeError: Cannot read property 'style' of undefined at slideshow (script.js:14) at script.js:1
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="script.js"></script>
<div id="wrapper">
<div id="content">
<div id="top">
<img class="slide" src="1.png" style="width:100%">
<img class="slide" src="2.png" style="width:100%">
</div>
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
</div>
</div>
</body>
</html>
This is my CSS code:
.slide {
display:none;
}
This is my Javascript code:
slideshow();
function slideshow() {
var index = 0;
var i;
var slides = document.getElementsByClassName("slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
index++;
if (index > slides.length) {
index = 1;
}
slides[index-1].style.display = "block";
setTimeout(slideshow, 2000);
}
I think the problem is that the javascript cannot access the images when they are in the div.
Share Improve this question asked Feb 2, 2017 at 19:33 Grandmango227Grandmango227 251 gold badge1 silver badge4 bronze badges1 Answer
Reset to default 61. You are placing the <script> file before the slides. So when your script is executed the first time, the markup does not yet exist in DOM.
Because your slides do not exist, after the initial for (which does nothing), you get to this line
slides[index-1].style.display = "block";
But slides[0] does not exist, so it doesn't have a .style property.
2. You are reassigning the value of 0 to index each time you re-run the function, so it will always show the same slide: the first.
(3.) You chose display as the method to show/hide your slides, which is not animatable. Therefore, your slides will change abruptly, there's no possibility of transition.
(4.) In addition, just as a matter of personal choice, I prefer document.querySelectorAll('.slide') to document.getElementsByClassName("slide"). I don't know exactly why. Probably because it's shorter and maybe because it allows a more flexible selector syntax (classes, ids. attributes or any other valid css selector).