The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Question

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read property 'style' of undefined," indicating that the array of elements containing the images is empty. However, a console log before the error message shows three images as expected.

Since I am using Web Maker, using "onclick" is not an option. Any suggestions on how to resolve this issue? It seems like a basic problem, but I can't seem to pinpoint it. (see code below)

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <style>

    </style>
  </head>
  <body>
    <div id="myslider">
      <img class="slide" src="http://chromethemer.com/wallpapers/chromebook-wallpapers/download/work-space-3840x2160.jpg">
      <img class="slide" src="http://lindstrominsuranceagency.com/wp-content/uploads/2015/10/business.jpeg">
      <img class="slide" src="http://www.nomisconnections.co.uk/wp-content/uploads/2016/10/image-1377543510.jpg">
      <button id="left-button"><i class="fa fa-chevron-left"></i></button>
      <button id="right-button"><i class="fa fa-chevron-right"></i></button>
    </div>
  </body>
</html>

CSS

#myslider {
  position: relative;
  height: 360px;
  width: 700px;
}

.slide {
  height: 100%;
  width: 100%;
  position: absolute;
/*   opacity: 0; */
  transition: 1s;
}

button {
  position: absolute;
  z-index: 1;
  top: 50%;
  background: rgba(0,0,0,0.8);
  border: none;
  padding: 10px;
  color: #fff;
  cursor: pointer;
}

button:nth-of-type(2) {
  right: 0;
}

JavaScript

document.getElementById("left-button").addEventListener("click", plusDivs(-1));
document.getElementById("right-button").addEventListener("click", plusDivs(1));

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  console.log("inside of plusDiv(n)");
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slide");
  console.log(x);
  if (n > x.length) {slideIndex=1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i <x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

javascript html css slideshow web-maker

Answer 1

Answer №1

It seems like you've placed your callback functions incorrectly within the addEventListener methods. To pass parameters in a function, you should invoke the function inside an anonymous function.

Here are some ways to handle this:

If you don't need to use function parameters, insert the function-object directly.

function someFunction(){
   // Your code here
}
elem.addEventListener('click', someFunction);

Alternatively, you can use an anonymous function.

elem.addEventListener('click', function(){
   // Your code here
});

To include a parameter in the function, wrap it within an anonymous function.

function someFunction(parameter){
   // Your code here
}
elem.addEventListener('click', function(){
   someFunction(parameter);
});

I would also recommend checking out the MDN docs for further information: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

PS: It's advisable to use more descriptive variable names instead of generic ones like x, n, or i.

Your updated code with corrected addEventListener methods

document.getElementById("left-button").addEventListener("click", () => {plusDivs(-1)});
document.getElementById("right-button").addEventListener("click", () => {plusDivs(1)});

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slide");
  if (n > x.length) {slideIndex=1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i <x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

#myslider {
  position: relative;
  height: 360px;
  width: 700px;
}

.slide {
  height: 100%;
  width: 100%;
  position: absolute;
/*   opacity: 0; */
  transition: 1s;
}

button {
  position: absolute;
  z-index: 1;
  top: 50%;
  background: rgba(0,0,0,0.8);
  border: none;
  padding: 10px;
  color: #fff;
  cursor: pointer;
}

button:nth-of-type(2) {
  right: 0;
}

<div id="myslider">
  <img class="slide" src="http://chromethemer.com/wallpapers/chromebook-wallpapers/download/work-space-3840x2160.jpg">
  <img class="slide" src="http://lindstrominsuranceagency.com/wp-content/uploads/2015/10/business.jpeg">
  <img class="slide" src="http://www.nomisconnections.co.uk/wp-content/uploads/2016/10/image-1377543510.jpg">
  <button id="left-button"><i class="fa fa-chevron-left"></i></button>
  <button id="right-button"><i class="fa fa-chevron-right"></i></button>
</div>

Answer 2

It seems like you've placed your callback functions incorrectly within the addEventListener methods. To pass parameters in a function, you should invoke the function inside an anonymous function.

Here are some ways to handle this:

If you don't need to use function parameters, insert the function-object directly.

function someFunction(){
   // Your code here
}
elem.addEventListener('click', someFunction);

Alternatively, you can use an anonymous function.

elem.addEventListener('click', function(){
   // Your code here
});

To include a parameter in the function, wrap it within an anonymous function.

function someFunction(parameter){
   // Your code here
}
elem.addEventListener('click', function(){
   someFunction(parameter);
});

I would also recommend checking out the MDN docs for further information: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

PS: It's advisable to use more descriptive variable names instead of generic ones like x, n, or i.

Your updated code with corrected addEventListener methods

document.getElementById("left-button").addEventListener("click", () => {plusDivs(-1)});
document.getElementById("right-button").addEventListener("click", () => {plusDivs(1)});

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slide");
  if (n > x.length) {slideIndex=1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i <x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

#myslider {
  position: relative;
  height: 360px;
  width: 700px;
}

.slide {
  height: 100%;
  width: 100%;
  position: absolute;
/*   opacity: 0; */
  transition: 1s;
}

button {
  position: absolute;
  z-index: 1;
  top: 50%;
  background: rgba(0,0,0,0.8);
  border: none;
  padding: 10px;
  color: #fff;
  cursor: pointer;
}

button:nth-of-type(2) {
  right: 0;
}

<div id="myslider">
  <img class="slide" src="http://chromethemer.com/wallpapers/chromebook-wallpapers/download/work-space-3840x2160.jpg">
  <img class="slide" src="http://lindstrominsuranceagency.com/wp-content/uploads/2015/10/business.jpeg">
  <img class="slide" src="http://www.nomisconnections.co.uk/wp-content/uploads/2016/10/image-1377543510.jpg">
  <button id="left-button"><i class="fa fa-chevron-left"></i></button>
  <button id="right-button"><i class="fa fa-chevron-right"></i></button>
</div>

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Answer №1

Similar questions

Determine the total quantity of colored cells within a row of an HTML table and display the count in its own

What is the process of transforming an xhr request into an angular $http request?

Guide to uploading multiple images to an Amazon AWS S3 bucket using Node.js, Angular, and JavaScript

Limit the bootstrap datepicker to display only certain dates and today's date

vuejs props become null upon page refresh

What is the best way to convert a JSON object into a string containing a negative zero in JavaScript?

Enhance User Experience with JQuery Autocomplete for Internet Explorer 8 Using ASMX Web Services

Displaying Kartik's growling animation using AJAX within Yii2 framework

Having four videos displayed on one webpage can cause the browser to function at a slower

Tips for inserting an icon alongside a list item in HTML

Selection pseudo selectors for tooltips are a great way to provide additional

Some of the picture remains concealed without spilling over

Expanding the content of :before

The array is failing to pass through ajax requests

Error: The last line is missing a trailing comma

Transferring information from child to parent class in TypeScript

Embellishing Your Website with Unique Cursor Styles

D3 - Rounded edge chart width

Nuxt - Sending Relative Path as Prop Leads to Error 404

Unable to retrieve data from the database within PHP code