Question 188426 in Html Question posted in
Some basic documentation can be found here.

Html – My first Slideshow ever, My Slideshow either shows only "Queen4" from array or shows "undefinde"

I started learning JavaScript week ago, and I am trying to code a slide show that also can change the title of the picture based on the picture. However, it replace the title with "Quenn4" which has the place 3 in my array…. or it says undefind.

Here is the code

and thanks for the help in advynce

// START OF Slideshow with Event Listener
(function(){
    "use strict";

    const myImages = ['sets/queen3.jpg', 'sets/queen4.jpg', 'sets/queen5.jpg', 'sets/queen6.jpg'];
    let currentImage = 0;
    const container = document.getElementById('content');
    const nextBtn = document.getElementById('next');
    const prevBtn = document.getElementById('previous');
    
    

    function swap(){
        const newSlide = document.createElement('img');
        newSlide.src = myImages[currentImage];
        newSlide.className = 'fadeinimg';
        container.appendChild(newSlide);

        if(container.children.length > 2){
            container.removeChild(container.children[0]);
        }
    };

    nextBtn.addEventListener('click', function(event){
        event.preventDefault();
        currentImage++;
        if(currentImage > (myImages.length - 1)){currentImage = 0;}

        swap();
        txtSwitcher();
    });
    prevBtn.addEventListener('click', function(event){
        event.preventDefault();
        currentImage--;
        if(currentImage < 0){currentImage = myImages.length - 1;}
    
        swap();
    });

    
    function txtSwitcher(){
        const queensNames = ["Queen1", "Queen2", "Queen3", "Queen4"];
        const queen = document.getElementById('img-title');
        let queenQue = 0;

        for (let i = 0; i < (queensNames.length); i++) {
            queenQue++;
            queen.innerHTML = queensNames[i];
            //console.log(queensNames[i]);
        }
        


        
    
    };

    


})();
// END OF : Slideshow Event Listener

Everything I could think of

Tags:

2

Answers


  1. 0

    Here are some points regarding different parts of your code:

    // function swap()

if(container.children.length > 2){
    container.removeChild(container.children[0]);
}

    This means that you want to have 2 images displayed at the same time. Is that correct? If you want just one image, change it to container.children.length > 1. Also, if you want the title to be updated every time you need to call txtSwitcher() inside prevBtn.addEventListener('click') as well. Alternatively you can call it inside swap() only.

    function txtSwitcher(){
    const queensNames = ["Queen1", "Queen2", "Queen3", "Queen4"];
    const queen = document.getElementById('img-title');
    let queenQue = 0;

    for (let i = 0; i < (queensNames.length); i++) {
        queenQue++;
        queen.innerHTML = queensNames[i];
        //console.log(queensNames[i]);
    }
}

    In this function you use let queenQue. This means that every time the function is called you reset queenQue to zero. After that in your for loop you go all the way to the last item in queensNames. What you need instead is declare the variables outside of your function. You can update the title using the current image index since it should correspond to the title index.

    Take a look at this demo which has your code with adjustments:

    // START OF Slideshow with Event Listener
(function() {
  "use strict";

  const myImages = ['https://picsum.photos/100', 'https://picsum.photos/105', 'https://picsum.photos/110', 'https://picsum.photos/115'];
  const container = document.getElementById('content');
  const nextBtn = document.getElementById('next');
  const prevBtn = document.getElementById('previous');

  const queensNames = ["Queen1", "Queen2", "Queen3", "Queen4"];
  const queen = document.getElementById('img-title');

  let currentImage = 0;

  //Display initial image and title
  swap();

  function swap() {
    const newSlide = document.createElement('img');
    newSlide.src = myImages[currentImage];
    container.appendChild(newSlide);

    if (container.children.length > 1) {
      container.removeChild(container.children[0]);
    }
    txtSwitcher();
  };

  nextBtn.addEventListener('click', function(event) {
    event.preventDefault();
    currentImage++;
    if (currentImage > (myImages.length - 1)) {
      currentImage = 0;
    }

    swap();
  });
  prevBtn.addEventListener('click', function(event) {
    event.preventDefault();
    currentImage--;
    if (currentImage < 0) {
      currentImage = myImages.length - 1;
    }

    swap();
  });

  function txtSwitcher() {
    queen.innerHTML = queensNames[currentImage];
  };
})();
// END OF : Slideshow Event Listener
    body {
  display: flex;
}
    <button id="previous">Previous</button>
<h3 id="img-title"></h3>
<div id="content"></div>
<button id="next">Next</button>
    Login or Signup to reply.
  2. 0

    The problem is you are iterating over the current array with a for loop so the name gets replaced several times till reaching the last index of your queens array (e.g. 3). You need to Change the name of the current shown images by the current state of currentImage.

    Furthermore you can’t decide which queen you want to edit at the moment so you need a way to access the first and the second image because you are always displaying 2 images.

    If you only want to display one image you need to change if(container.children.length > 2){ to if(container.children.length >= 2){ to only display one queen at a time. You should never have the same id in one document twice so you should add the currentImage as index to the new image id you are creating with the setAttribute method of javascript.

    You have two arrays which are both the same length like following:

    const queens = ['queen1', 'queen2', 'queen3', 'queen4'];
const queenTitles = ['title queen1', 'title queen2', 'title queen3', 'title queen4'];

    So the index 0 of the array queens is the image to the title in index 0 of the array queenTitles.

    So your txtSwitcher() function should look like something like this:

    function txtSwitcher(){
        const queensNames = ["Queen1", "Queen2", "Queen3", "Queen4"];
        const queen = document.getElementById('img-title-new-image');
        queen.innerHTML = queensNames[currentImage];
};

    Couldn’t test it out because your HTML was missing and some more information. But conceptional it should work like this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search