如何使用 JavaScript addEventListener 在页面加载时有两个或多个函数运行？

Question

我正在尝试让多个功能在页面加载时自动启动。但是，我只能让第一个函数起作用，而第二个函数被忽略了。我有两个幻灯片（改编自 w3schools）不会自动加载第一张图像幻灯片，只有在单击箭头切换到下一张幻灯片后才会显示图像，然后它们才能正常显示。但是，我希望这两个幻灯片在页面加载时自动显示它们的第一张幻灯片。这是我得到的，以及我尝试过的：

（放轻松，我是JavaScript新手）

var slideIndex = 1;
var slideIndex2 = 1;
showSlides(slideIndex);
showSlides2(slideIndex2);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function plusSlides2(m) {
  showSlides2(slideIndex2 += m);
}

function currentSlide2(m) {
  showSlides2(slideIndex2 = m);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {
    slideIndex = 1
  };
  if (n < 1) {
    slideIndex = slides.length
  };
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  };
  slides[slideIndex - 1].style.display = "block";
};

function showSlides2(m) {
  var j;
  var slides2 = document.getElementsByClassName("mySlides2");
  if (m > slides2.length) {
    slideIndex2 = 1
  };
  if (m < 1) {
    slideIndex2 = slides2.length
  };
  for (j = 0; j < slides2.length; j++) {
    slides2[j].style.display = "none";
  };
  slides2[slideIndex2 - 1].style.display = "block";
};

function start() {
  showSlides(1);
  showSlides2(1);
};

/* Slideshow Styles
Adapted from:
https://www.w3schools.com/howto/howto_js_slideshow.asp */

* {
  box-sizing: border-box
}


/* Slideshow container */

.slideshow-container {
  display: block;
  float: left;
  max-width: 1000px;
  height: 450px;
  min-width: 425px;
  position: relative;
  margin: 0px 15px 0px 0px;
  width: 60%;
}

.mySlides,
.mySlides2 {
  height: 450px;
  line-height: 450px;
  margin: auto !important;
  text-align: center !important;
  display: none;
  width: 99% !important;
}

.mySlides img,
.mySlides2 img {
  /*margin: auto;*/
  max-height: 450px;
  max-width: 425px;
  height: auto;
  width: auto;
}


/* Next & previous buttons */

.slprev,
.slnext {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.slnext {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

<html>

<body onload="start();">
  <header></header>
  <section>
    <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext">1 / 12 </div>
        <img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-21.jpg" />
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 12 </div>
        <img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg" />
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 12 </div>
        <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg" />
      </div>

      <!-- And so on -->

      <div class="slideshow-arrows">
        <a class="slprev" onClick="plusSlides(-1)">&#10096;</a>
        <a class="slnext" onClick="plusSlides(1)">&#10097;</a>
      </div>

    </div>

    <div class="slideshow-container">

      <div class="mySlides2 fade">
        <div class="numbertext">1 / 9 </div>
        <img src="http://cdn3-www.cattime.com/assets/uploads/2011/08/best-kitten-names-1.jpg" />
      </div>

      <div class="mySlides2 fade">
        <div class="numbertext">2 / 9 </div>
        <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" />
      </div>

      <div class="mySlides2 fade">
        <div class="numbertext">3 / 9 </div>
        <img src="http://leecamp.net/wp-content/uploads/kitten-3.jpg" />
      </div>

      <!-- And so on -->

      <div class="slideshow-arrows">
        <a class="slprev" onClick="plusSlides2(-1)">&#10096;</a>
        <a class="slnext" onClick="plusSlides2(1)">&#10097;</a>
      </div>

    </div>

  </section>
</body>

</html>

如您所见，我只是从 w3schools 复制了原始 JavaScript 并将所有变量更改为第二个变量的新变量。我确信有更好的方法可以做到这一点，但至少它确实有效。现在，为了解决第一张幻灯片没有自动显示的问题，我原来在我的正文中添加：

<body onload="showSlides(1);">

非常适合在加载时显示我的第一张幻灯片。它还可以在我的第二张幻灯片中自动显示第一张幻灯片：

<body onload="showSlides2(1);">

但是当我尝试时它只加载第一个：

<body onload="showSlides(1);showSlides2(1);">

所以不好。这是我在互联网上搜索解决方案的地方。我看到了this one on here about combining them into a different function。那时我转而制作一个名为 "start" 的 JavaScript 函数来使用我的两个函数并将 onload 更改为 :

function start() {
    showSlides(1);
    showSlides2(1);
};

仍然只加载第一个。所以我改变了他们的顺序（先放 showSlide2(1); ）然后第二个会加载，而第一个不会。

所以我搜索了另一种方法并遇到了 examples of using "addEventListener" 来完成这个。但是，尝试使用它不会导致加载 - 我猜这是因为我不知道如何正确使用它。我删除了启动功能，并在"showSlides"和"showSlides2"功能之前添加了"addEventListener"：

document.addEventListener("load", showSlides);
document.addEventListener("load", showSlides2);

我也尝试过，包括 1 - 例如 document.addEventListener("load", showSlides(1)); - 但那也无济于事。我希望它就像修复语法一样简单，但我自己似乎无法弄清楚。

问题来了：如何让这两个函数在页面加载时发生？

如果重要，我正在使用 Firefox 51.0.1 和 Chrome 56.0.2924.87 对其进行测试，两者的结果相同。谢谢你的时间。

Answer 1

在调用 .addEventListener() 时将 DOMContentLoaded 事件替换为 document 的 load。

在事件处理程序中执行操作，而不是 document.addEventListener("load", showSlides(1));，它会立即调用 showSlides()。

此外，在 html document 处包含 DOCTYPE 声明。

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box
    }
    /* Slideshow container */
    
    .slideshow-container {
      display: block;
      float: left;
      max-width: 1000px;
      height: 450px;
      min-width: 425px;
      position: relative;
      margin: 0px 15px 0px 0px;
      width: 60%;
    }
    
    .mySlides,
    .mySlides2 {
      height: 450px;
      line-height: 450px;
      margin: auto !important;
      text-align: center !important;
      display: none;
      width: 99% !important;
    }
    
    .mySlides img,
    .mySlides2 img {
      /*margin: auto;*/
      max-height: 450px;
      max-width: 425px;
      height: auto;
      width: auto;
    }
    /* Next & previous buttons */
    
    .slprev,
    .slnext {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: black;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
    }
    /* Position the "next button" to the right */
    
    .slnext {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    /* Number text (1/3 etc) */
    
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    /* Fading animation */
    
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @-webkit-keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }
    
    @keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }
  </style>
  <script>
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function plusSlides2(m) {
      showSlides2(slideIndex2 += m);
    }

    function currentSlide2(m) {
      showSlides2(slideIndex2 = m);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      if (n > slides.length) {
        slideIndex = 1
      };
      if (n < 1) {
        slideIndex = slides.length
      };
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      };
      slides[slideIndex - 1].style.display = "block";
    };

    function showSlides2(m) {
      var j;
      var slides2 = document.getElementsByClassName("mySlides2");
      if (m > slides2.length) {
        slideIndex2 = 1
      };
      if (m < 1) {
        slideIndex2 = slides2.length
      };
      for (j = 0; j < slides2.length; j++) {
        slides2[j].style.display = "none";
      };
      slides2[slideIndex2 - 1].style.display = "block";
    };

    var slideIndex = 1;
    var slideIndex2 = 1;

    document.addEventListener("DOMContentLoaded", function() {
      console.log("first DOMContentLoaded event");
      showSlides(slideIndex);
    });

    document.addEventListener("DOMContentLoaded", function() {
      console.log("second DOMContentLoaded event");
      showSlides2(slideIndex2);
    });
  </script>
</head>

<body>
  <header></header>
  <section>
    <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext">1 / 12 </div>
        <img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-21.jpg" />
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 12 </div>
        <img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg" />
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 12 </div>
        <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg" />
      </div>

      <!-- And so on -->

      <div class="slideshow-arrows">
        <a class="slprev" onClick="plusSlides(-1)">&#10096;</a>
        <a class="slnext" onClick="plusSlides(1)">&#10097;</a>
      </div>

    </div>

    <div class="slideshow-container">

      <div class="mySlides2 fade">
        <div class="numbertext">1 / 9 </div>
        <img src="http://cdn3-www.cattime.com/assets/uploads/2011/08/best-kitten-names-1.jpg" />
      </div>

      <div class="mySlides2 fade">
        <div class="numbertext">2 / 9 </div>
        <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" />
      </div>

      <div class="mySlides2 fade">
        <div class="numbertext">3 / 9 </div>
        <img src="http://leecamp.net/wp-content/uploads/kitten-3.jpg" />
      </div>

      <!-- And so on -->

      <div class="slideshow-arrows">
        <a class="slprev" onClick="plusSlides2(-1)">&#10096;</a>
        <a class="slnext" onClick="plusSlides2(1)">&#10097;</a>
      </div>

    </div>

  </section>
</body>

</html>

如何使用 JavaScript addEventListener 在页面加载时有两个或多个函数运行？

How to have two or more functions run on page load using JavaScript addEventListener?

html

javascript

slideshow

addeventlistener

如何使用 JavaScript addEventListener 在页面加载时有两个或多个函数 运行？

How to have two or more functions run on page load using JavaScript addEventListener?

html

javascript

slideshow

addeventlistener

如何使用 JavaScript addEventListener 在页面加载时有两个或多个函数运行？