ボタンにクリックイベントを設定し、画像が指定した位置に移動するようにしていきます。
- クリックイベントの追加
- カレントクラスの移動
クリックイベントの追加
・前回まででボタンをJavaScript生成出来ました。
・今回は生成したボタンにクリックイベントをつけていきたいと思います。
・具体的にはクリックしたら指定のスライドを表示するようにコードを書いていきます。
・まずは前回作ったsetunDotsの中身をいじっていきます。
・const button = document.createElement(‘button’);と dots.push(button);の間にコードを追加していきます。
・まずはボタンをクリックしたら指定した画像に飛ぶようにしていきます。
・まずはaddEventlistenerを使ってクリックイベントを作っていきます。
・内容はi番目のボタンがクリックされた時にそれをcurrentIndexに代入していきます。
・その上でmoveslides()で画像を表示してあげます。
・こんな感じですね。
button.addEventListener(‘click’, () => {
currentIndex = I;
updateButtons();
moveSlides();
});
カレントクラスの移動
・次にこのままだとカレントクラスが移動しておらずクリックしたボタンの色が変わっていないのでカレントクラスが移動できるようにしていきます。
・まずはdotsのすべての要素のカレントクラスを削除してクリックされたところにつけ直すようにコードを書いていきます。
・先程のcurrentIndex = I;とupdateButtons();の間に書いていきましょう。
・すべてのdotsに対してremoveをつかたいのでforEachを使っていきます。
・こんな感じですね。
dots.forEach(dot => {
dot.classList.remove(‘current’);
});
・そしてクリックされたところにつけ直すにはdots[currentIndex]で指定してclassList.add(‘current’);でつけ直すことが出来ます。
こんな感じですね。
dots[currentIndex].classList.add(‘current’);
これでクリックしたところに移動しcurrentクラスは移動してくれます。
まとめるとこんなコードになります。
function setupDots() {
for (let i = 0; i < slides.length; i++) {
const button = document.createElement(‘button’);
button.addEventListener(‘click’, () => {
currentIndex = i;
dots.forEach(dot => {
dot.classList.remove(‘current’);
});
dots[currentIndex].classList.add(‘current’);
updateButtons();
moveSlides();
});
dots.push(button);
document.querySelector(‘nav’).appendChild(button);
}
