Question

0

109

Views

caroussel not displaying image in JS

i've a problem with my caroussel in JS He just don't recognize my innerHTML, in fact when i look on the inspector, he don't recognize the on my innerHTML, i've done some research and didn't found anything (showing

<img src = unknown/>.

My img array is an url array not in any folder.

Here's what i already have

 function slideShow() {
  var counter = 0;
  slideShow();
  const diapoImages = [
    "https://images.unsplash.com/photo-1652044049927-7142ea82c81d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
    "https://images.unsplash.com/photo-1639718561716-b59d3995d886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
    "https://images.unsplash.com/photo-1653593349937-1a2a29a614d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80",
    "https://images.unsplash.com/photo-1653629154297-d01874fe01c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
    "https://images.unsplash.com/photo-1653537649117-821e01f707c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
  ];

  var imgDiv = document.getElementById("header");

  if (counter < diapoImages.length) {
    var img = diapoImages[counter];
    imgDiv.innerHTML = `<img src=${img}/>`;
    counter += 1; 
  }
  else {
    counter = 0; 
  }
  setTimeout(slideShow, 5000)
}

here's the HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/c9b7852654.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/style.css">
    <title>Diaporama</title>
</head>
<body>
    <i id = "nav-gauche" class="fa-solid fa-arrow-left-long"></i>
    <i id = "nav-droite" class="fa-solid fa-arrow-right-long"></i>
<div class="container">
    <h1>Javascript Caroussel</h1>
    <h2>Test d'un caroussel en JS</h2>
    <div id="header">

    </div>
</div>
<script src=""></script>
</body>
</html>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-25T22:09:41.930Z

You should create the image tag using document.createElement("img"). Then, you should set the src of image tag. At the end of the function, you should append the image tag into the div tag.

function slideShow() {
        var counter = 0;
            slideShow();
            const diapoImages = [
                "https://images.unsplash.com/photo-1652044049927-7142ea82c81d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
                "https://images.unsplash.com/photo-1639718561716-b59d3995d886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
                "https://images.unsplash.com/photo-1653593349937-1a2a29a614d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80",
                "https://images.unsplash.com/photo-1653629154297-d01874fe01c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
                "https://images.unsplash.com/photo-1653537649117-821e01f707c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
            ];
    var imgDiv = document.getElementById("header");
    var image = document.createElement("img")
    for (var ind in diapoImages)       
        while ( ind < (diapoImages.length + 1)){       
            if (counter < diapoImages.length) {
                var img = diapoImages[counter];
                imgDiv.appendChild(image)
                counter += 1;
                image.src = img 
            }
            else {
                counter = 0; 
            }
        }
    }
    setTimeout(slideShow, 5000)

Answer 2 · 2022-06-25T22:09:41.938Z

I don't know about innerHTML error, but I could see two important points that maybe help you.

The line 3 (slideShow();) causes recursive calls.
Whenever the function is invoked, line 2 (counter = 0;) will reset the value. So the second image will never be rendered.

function slideShow(counter = 0) {
  const diapoImages = [
    "https://images.unsplash.com/photo-1652044049927-7142ea82c81d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
    "https://images.unsplash.com/photo-1639718561716-b59d3995d886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
    "https://images.unsplash.com/photo-1653593349937-1a2a29a614d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80",
    "https://images.unsplash.com/photo-1653629154297-d01874fe01c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
    "https://images.unsplash.com/photo-1653537649117-821e01f707c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
  ];

  var imgDiv = document.getElementById("header");

  if (counter < diapoImages.length) {
    var img = diapoImages[counter];
    imgDiv.innerHTML = `<img src=${img}/>`;
    counter += 1;
  } else {
    counter = 0;
  }

  setTimeout(() => slideShow(counter), 5000)
}

slideShow();

<div id="header"></div>

0

109

caroussel not displaying image in JS

2 answers

0

0

Find remote jobs

Andres GPT