和隆日記

今回はこのコードを使って説明します。

See the Pen Untitled by Funahashi (@KYU123) on CodePen.

クリックイベント

クリックしてアクションを起こしたい変数を取ります。

const teamArea = document.querySelector(‘.team’);

const leagueBtn = document.querySelectorAll(‘button’);

そしてその取得した変数にクリックイベントを付けます。

使う時に扱うのは「addEventListener」です。

leagueBtn[i].addEventListener(‘click’, function() {

ここでUlに表示したいけどUlがないから作ります。

const ulElm = document.createElement(‘ul’);

そしてteamAreaにUlを表示させます。そのためにinnerHTMLを使います。

teamArea.innerHTML = ”;

そしてfor (let i = 0; i < leagueBtn.length; i++) {

の中に入れるとfor文で回すことができます。

そしてif文でi==0（buttonの一つ目）を唱えて行きます。

形はこう、

if(i ===0){

変数名centralLeagueを作ってnpd.centalを設定する。

for (const centralLeague of npb.central) {

そしてそれをliで表示したいのでLiを作る。

const liElm = document.createElement(‘li’);

そしてliに表示させる。

liElm.innerHTML = centralLeague.team;

文字の最後列にくっつける。それがappendChild

ulElm.appendChild(liElm);

}

//ここからは上の通りにコードを書き変数名を変えるだけです。

}else if (i === 1){

for (const pacificLeague of npb.pacific) {

const liElm = document.createElement(‘li’);

liElm.innerHTML = pacificLeague.team;

ulElm.appendChild(liElm);

}

これで完成です。

まとめ

オブジェクトは難しいけど覚えたら色んなことができる。

if文の中身を書くのが大変でした。