caroussel not displaying image in JS-CodePudding

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" ></i>
    <i id = "nav-droite" ></i>
<div >
    <h1>Javascript Caroussel</h1>
    <h2>Test d'un caroussel en JS</h2>
    <div id="header">

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

CodePudding user response：

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)

CodePudding user response：

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>