CODEWITHSUNDEEP
javascripthtml
s89_
s89_

Reputation: 1723

Trying to remove an HTML element with JS

I'm trying to create an image rotator in JS. The fade animation I'm applying in CSS only works on element creation, so I'm having to remove the element on each iteration through the loop.

The problem I'm facing is in the title - I can't seem to remove the clientImg, and I can't figure out why... Can anyone help?

The error I'm getting is: Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

JS

function clientRotator(){

  var section = document.getElementById("clients");
  var clientImg = document.createElement("img");
  clientImg.setAttribute("id", "rotator");
  section.appendChild(clientImg);
  clientImg.src = "assets/exxon-mobil.png";
  var imgArray = ["assets/shell.png", "assets/bp.png", "assets/talisman.png", "assets/cnr-international.png", "assets/exxon-mobil.png"];

  var delaySeconds = 3;
  var iteration = 0;

  setInterval(function(){
    console.log(imgArray[iteration]);

    section.removeChild(clientImg);
    var clientImg = document.createElement("img");
    clientImg.setAttribute("id", "rotator");
    section.appendChild(clientImg);
    clientImg.src = imgArray[iteration];

    if (iteration < imgArray.length-1){
      iteration += 1;
    }
    else {
      iteration = 0;
    }
  }, delaySeconds * 1000)

}

window.addEventListener("load", clientRotator());

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="css/style.css">
      <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    </head>
    <body>
      <section id="header">
      <img id="logo" src="assets/logo-new.png" alt="Logo">
      </section>
      <section id="clients">
<!-- Rotating images go here -->
      </section>
      <footer>
      </footer>
    </body>
    <script src="scripts/main.js"></script>
    </html>

Upvotes: 1

Views: 80

Answers (2)

Jan Misker
Jan Misker

Reputation: 2149

This line is wrong:

window.addEventListener("load", clientRotator());

It calls the function clientRotator() and adds the result (probably undefined) as the event listener. Or in other words, your function clientRotator() is called before the document is fully loaded, so your element with id clients doesn't exist yet.

What you want instead is

window.addEventListener("load", clientRotator);

This adds the function itself as the event listener, so it is only called when the load event fires.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

The var keyword was the culprit, making it limited to the scope inside the function. The second iteration has totally a new function, where the clientImg doesn't even exist.

function clientRotator() {

  var section = document.getElementById("clients");
  var clientImg = document.createElement("img");
  clientImg.setAttribute("id", "rotator");
  section.appendChild(clientImg);
  clientImg.src = "assets/exxon-mobil.png";
  var imgArray = ["assets/shell.png", "assets/bp.png", "assets/talisman.png", "assets/cnr-international.png", "assets/exxon-mobil.png"];

  var delaySeconds = 3;
  var iteration = 0;

  setInterval(function() {
    console.log(imgArray[iteration]);
    if (!!clientImg);
      section.removeChild(clientImg);
    clientImg = document.createElement("img");
    clientImg.setAttribute("id", "rotator");
    section.appendChild(clientImg);
    clientImg.src = imgArray[iteration];

    if (iteration < imgArray.length - 1) {
      iteration += 1;
    } else {
      iteration = 0;
    }
  }, delaySeconds * 1000)

}

window.addEventListener("load", clientRotator());
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<section id="header">
  <img id="logo" src="assets/logo-new.png" alt="Logo">
</section>
<section id="clients">
  <!-- Rotating images go here -->
</section>
<footer>
</footer>

Upvotes: 1

Related Questions