Question

我试图在JS中创建一个图像旋转器。我在CSS中应用的淡入淡出动画仅适用于元素创建，因此我必须通过循环在每次迭代中删除元素。

我面临的问题在于标题 - 我似乎无法删除clientImg，我无法弄清楚为什么......有人可以帮忙吗？

我得到的错误是：未捕获的TypeError：无法执行＆＃39; removeChild＆＃39; on＆＃39; Node＆＃39;：参数1不属于＆＃39; Node＆＃39;

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>

Answer 1

var关键字是罪魁祸首，使其仅限于函数内部的范围。第二次迭代完全具有新功能，clientImg甚至不存在。

＆＃13;

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());

＆＃13;

<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>

＆＃13;

Answer 2

这一行错了：

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

它调用函数clientRotator()并将结果（可能是未定义的）添加为事件侦听器。或者换句话说，您的函数clientRotator()在文档完全加载之前被称为，因此您的标识为clients的元素尚未存在。

你想要的是

window.addEventListener("load", clientRotator);

这会将函数本身添加为事件侦听器，因此仅在load事件触发时调用它。

尝试使用JS删除HTML元素

2 个答案: