JavaScriptで追加した要素にイベントを追加したいです

JavaScriptで追加した要素にクリックイベントをつけたいです。

JavaScript
1let plas=document.getElementById("plas-a");
2plas.addEventListener('click',function(){
3    let newTask = document.getElementById("WantToAdd").value;
4    let lists = document.getElementById("todolist-a");
5    lists.insertAdjacentHTML("beforeend","<li><p class='lankbtn'>●</p>"+newTask+"</li>");
6});
7

追加した<p class='lankbtn'>●</p>にクリックイベントをつけたいです。
ですが、このクラスがうまく機能してないみたいで、CSSの変更もこのクラス名ではできませんでした。

追加した要素にクリックイベントをつける方法がわかる方教えてください。

kei344

2019/10/27 07:30

「CSSの変更もこのクラス名ではできませんでした。」とはどういうことを試されたのでしょう。コードを質問文に追記していただけませんか？

tokio-k

2019/10/27 07:32

カラーの変更です。

tokio-k

2019/10/27 07:35

すみませんテラテイルの使い方をよくわかっていませんでした。質問しなおします。

行動規範の内容に同意します

回答2件

ベストアンサー

追加する要素を事前に作っておけばハンドラをつけられます。

javascript:
1let plas = document.getElementById("plas-a");
2plas.addEventListener('click', function () {
3    let newTask = document.getElementById("WantToAdd").value;
4    let lists = document.getElementById("todolist-a");
5    const li = document.createElement('li');
6    li.innerHTML = "<p class='lankbtn'>●</p><span>" + newTask + "</span>" +
7      "<i class='far fa-trash-alt gomi'></i><i class='fas fa-edit edi'></i>";  // liの中身だけ
8    li.querySelector('p').onclick = console.error
9    li.querySelector('i.gomi').onclick = console.debug
10    li.querySelector('i.edi').onclick = function (event) {
11        event.target.parentNode.querySelector("span").setAttribute("contenteditable","true")
12    }
13    lists.insertAdjacentElement("beforeend", li);
14});

投稿2019/10/27 09:13

編集2019/10/28 03:32

matobaa

総合スコア2493

tokio-k

2019/10/27 09:49

ありがとございます。家に帰ったら確認してみます。

tokio-k

2019/10/27 10:42

= console. の部分はどういう意味ですか？ iが2つあってそれぞれにイベントをつけたいのですが、どうしたらいいですか？

tokio-k

2019/10/27 10:48

pとiがクリックイベントになりません

tokio-k

2019/10/27 11:09

なかなかうまくいきませんが、イベントはつけれるようになりました。

matobaa

2019/10/28 03:14 編集

= console. の部分は、すいません適当に書いたんですけど、「クリックされたらそのイベントを開発者コンソールに表示する」という意味で書きました。tokio-kさんの知っている書き方だとほぼ以下と同じです: li.getElementsByTagName("p")[0].addEventListener('click', function(event) {return console.error(event);})

matobaa

2019/10/28 03:33

iが2つあってそれぞれにイベントをつけたいなら、クラスでもつけて区別できるようにすればいいです。回答の例をそのように修正してみました。

tokio-k

2019/10/28 04:08

ありがとうございます。その後いろいろ試してうまく行きました。本当にありがとうございます

matobaa

2019/10/28 13:35

ちなみにですけど、Editをクリックするとタスクの文字を自由に変更できるようになったりして。

tokio-k

2019/10/29 14:52

タスクの文字を自由に変更するのをしたかったのですが、よくわからなかったので、とりあえずなしで作って、できてから余裕があったら、また頑張ります。ちなみにそのような機能をつけるためにはインプットタグを作って隠しておかなければいけないのでしょうか