JavaScriptでボタンを動的に生成する方法について見ていきます。
- 関数を作ろう
- 余白の設定
関数を作ろう
・前回まででHTMLとCSSで丸いボタンを作ってい行きコメントで消しておきました。
・今回はそのボタンをJavaScriptで生成し、CSSのスタイリングも適用させていきます。
・まずはボタンを格納していくための配列の宣言をしていきます。
・名前はわかりやすいようにdotsとしていきます。
const dots = [];
と書いていけばいいですね。
・次にボタンを作る指示をsetupDotsという関数にまとめていきます。
・この中で画像の数だけボタンを作っていくのでforでループを回していきます。
・画像の数はslides.lengthで指定できるので
function setupDots() {
for (let i = 0; i < slides.length; i++) {}}
と書いていきます。
・更にその中でボタンの生成をしていきます。
・ボタンはdocument.createElement(‘button’);で作ることが出来てbuttonと名前をつけておきます。
・また、今作ったボタンに対して後で処理が設定できるようにdotsに格納しておきます。
・その上でボタンはページに表示したいのでquerySelectorでnav要素を取得し、paaendChildでぼったんをページに追加していきます。
・まとめるとforの中身は
for (let i = 0; i < slides.length; i++) {
const button = document.createElement(‘button’);
dots.push(button);
document.querySelector(‘nav’).appendChild(button);
}
こんな感じになります。
・次に最初のボタンにはcurrentクラスをつけて少し濃くしておきたいので
dots[0].classList.add(‘current’);
と書いておきましょう。
・あとはこの関数をページを読み込んだ時に実行してあげればいいので前に作ったupdateButtons();のあとに今回作ったsetupDots();を追加しておきましょう。
・全体で見るとこんな感じですね。
function setupDots() {
for (let i = 0; i < slides.length; i++) {
const button = document.createElement(‘button’);
dots.push(button);
document.querySelector(‘nav’).appendChild(button);
}
dots[0].classList.add(‘current’);
}
updateButtons();
setupDots();
余白の設定
・JavaScriptの特徴としてHTMLで作った時に比べて少し詰まった感じになってしまいます。
・これはHTMLは改行を空白として認識するのに対してJavaScriptは改行がないためです。
・気になる場合はCSSで設定し直しましょう。
・ボタンの次にボタンが来る時に右側に余白を作りたいのでセレクタをnav button + button としてあげてプロパティはmargin-left: 8px;と書いてあげましょう。
