私は複数の機能をページロード時に自動的に開始しようとしています。しかし、私は最初の機能は動作させることができますが、2番目の機能は無視されます。最初の画像スライドを自動的に読み込まない2つのスライドショー（w3schools）があり、次のスライドに変更するために矢印をクリックした後に画像を表示するだけで、正しく表示されます。しかし、私はこれらのスライドショーの両方が、ページの読み込み時に自動的に最初のスライドを表示するようにしたいと思います。ここで私が持っているものだ、と私が試したもの：JavaScript addEventListenerを使用して2つ以上の関数をページ読み込みで実行するにはどうすればよいですか？
はあなたが見ることができるように私は、
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)">❰</a>
<a class="slnext" onClick="plusSlides(1)">❱</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)">❰</a>
<a class="slnext" onClick="plusSlides2(1)">❱</a>
</div>
</div>
</section>
</body>
</html>（私に簡単に行く、私はJavaScriptの初心者です） 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を見た。それでも最初のロード
function start() {
showSlides(1);
showSlides2(1);
};
：私は私の両方の機能を使用するために、「開始」とのonloadイベントに変更と呼ばれるJavaScript関数を作るに切り替えたときです。だから私は順序を入れ替えた（showSlide2（1）;最初に置く）。そして、2番目のものがロードされ、最初のものはロードされないだろう。
私は別の方法を探して、これを達成するために "addEventListener"を使用してexamplesを見つけました。しかし、それを使用しようとするとどちらもロードされません - 私はそれを正しく使用する方法がわからないので、私はそれを推測しています。 （showSlides、例えばdocument.addEventListenerとして（ "負荷" -
document.addEventListener("load", showSlides);
document.addEventListener("load", showSlides2);
Iはまた、1を含む、それを試した：私はスタート機能を除去し、そして "showSlides" および "showSlides2" 機能の前に "のaddEventListener" を追加しました1））; - でもそれは何もしなかった。私は構文を修正するのと同じくらい簡単だと思っていますが、私はそれを自分で理解できないようです。
ページの読み込み時に両方の機能を実行するにはどうすればよいですか？
Firefox 51.0.1とChrome 56.0.2924.87を使用してテストしていますが、どちらも同じ結果です。あなたの時間をありがとう。
あなたは 'document.addEventListener（ 'DOMContentLoaded'、機能（）{showSlides（1）; showSlides2（1）}）しようとしましたか'？ – cyrix
注：w3schoolsはw3cではありません – guest271314
ブラウザの開発コンソールにエラーが表示されますか？ 'load'イベントは' document'ではなく 'window'に付加されなければなりません。' window.addEventListener（ "load"、showSlides）; '、しかし' onload = "showSlides（1）; showSlides2（1）;"あなたの 'start（）'関数は 'showSlides（）'で何らかのエラーが発生しない限りうまく動作しているはずです。 – nnnnnn