0

var button = document.getElementById('button'),
    list = document.getElementById('list');

button.addEventListener('click', function() {
  list.insertAdjacentHTML('beforeend', '<li>リスト</li>');
});

// #list > li をクリックしたらそのliの背景色をたとえば赤色にしたい
<button id="button">リストを追加</button>
<ul id="list"></ul>

このようにボタンをクリックするとリストが追加されていきます。その追加されたリストがクリックされたらそのリスト(li)の背景色を赤色にしたい場合、どのように記述すればよいでしょうか?

4 件の回答 4

4

親要素にclickイベントを定義すれば、li要素を追加する度にイベント定義せずとも済みます。
element.style.backgroundCololr で背景色を変える方法はHTML/CSSの役割的によろしくない為、class属性やaria-selected属性を使用する事を推奨します。
また、color, background-color はセットで指定する事が推奨されています。

'use strict';
document.getElementById('button').addEventListener('click', function handleAddLi (event) {
  document.getElementById('list').insertAdjacentHTML('beforeend', '<li>リスト</li>');
}, false);

document.getElementById('list').addEventListener('click', function handleSelected (event) {
  var li = event.target;

  if (li.tagName === 'LI') {
    li.setAttribute('aria-selected', 'true');
  }
}, false);
#list>[aria-selected="true"] {
  color: black;
  background-color: red;
}
<button id="button">リストを追加</button>
<ul id="list"></ul>

Re: qsmq さん

2

おそらくやりたいこととしてはこういうこと?

各要素にイベントをもたせるのは無駄なので親要素でハンドルしてやってます(所謂デリゲートです)。jQueryとかだともうちょっとスッキリ書ける……

(要素の判定方法とかガバガバなのでそのまま使うのは避けてください)

const button = document.getElementById('button'),
    list = document.getElementById('list');
let id = 1;
button.addEventListener('click', function() {
  list.insertAdjacentHTML('beforeend', `<li>リスト項目<span>${id++}</span></li>`);
});
list.addEventListener('click', e=> {
  let el = e.target;
	while(el&&el!==list) {
    if(el.tagName==='LI') {
      el.style.backgroundColor = 'red';
      break;
    }
    el = el.parentElement;
  }
}, true);
<button id="button">リスト項目を追加</button>
<ul id="list"></ul>

1

追加したliにイベントを1個ずつ追加するのが、多少冗長ですがわかりやすいと思います。

var button = document.getElementById('button'),
    list = document.getElementById('list');

button.addEventListener('click', function() {
  //id確定のためのランダムIDの生成
  var tmp_id = Math.random().toString(36).slice(-8);
  //idを設定してHTMLに書き出し
  list.insertAdjacentHTML('beforeend', '<li id="'+ tmp_id  +'">リスト</li>');
  //追加したli要素を再度取得
  var add_li = document.getElementById(tmp_id);
  add_li.addEventListener('click', function() {
    add_li.style.backgroundColor = '#ff0000';
  });
});

// #list > li をクリックしたらそのliの背景色をたとえば赤色にしたい
<button id="button">リストを追加</button>
<ul id="list"></ul>

回答例ではidをランダムに振っていますが、一意制御を入れたりする必要がありますのでこのままアプリ化はできないと思います。またgetElementById以外でやるのも方法もあると思います。

重要なことは、追加した要素にもイベント監視(addEventListener)を追加するというところです。

1

追加する要素にイベントリスナーを付けてあげればいいです。
追加した要素を後から個別に判定したい場合は要素を配列などで保持したり、要素にクラスやID、data属性を入れて必要になった都度取得するなどの方法があります。

JavaScript

var button = document.getElementById('button'),
    list = document.getElementById('list');

button.addEventListener('click', function() {
  var listElem = document.createElement('li');
  listElem.textContent = 'リスト';
  listElem.addEventListener('click', function(e) {
    e.currentTarget.classList.add('redBg');
  });
  list.appendChild(listElem);
});

CSS

.redBg {
  background-color: red;
}

しかしこのようなDOM操作をページ全体に渡って過度に行うとコードがわけわからなくなるのでその場合はフレームワークの導入をおすすめします。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。