ローカルストレージから呼び出した値にイベントをつけれない

Question

ローカルストレージから出すときにクリックイベントがうまくつきません。
onloadイベントでこの下記のコードのイベントをします。そのイベントの中で<li>を作るたびにそこにクリックイベントをつけるつもりです。

<ul></ul>の中に<li>を作っていきます。 liの中のp要素とi要素にクリックイベントをつけようとしているのですが、なぜか最初の一つにしか付きません。 考えられる原因は何でしょうか。 どうしたら解決するのでしょうか。

onloadイベントではなくinputタグから追加するときはすべてにつけることができます。

var loadlsta=JSON.parse(localStorage.getItem('keya'));
    
    loadlsta.forEach(function(loadtask){
        let lists = document.getElementById("todolist-a");
        lists.insertAdjacentHTML("beforeend","<li><p>◉</p>"+loadtask+"<i class='far fa-trash-alt gomi'></i></li>");
        let i=0;
        lists.querySelector('p').addEventListener('click',function(){
            let lank = ["◉","✮","▴","✓"];
            i++;
            if(i==4){
                i=0;
            }
            this.innerHTML=lank[i];
            
            switch(i){
                case 0 :
                    this.parentNode.style.color = '#000'
                    this.parentNode.style.textDecoration = "none"
                    break;
                case 1 :
                    this.parentNode.style.color = '#00f'
                    this.parentNode.style.borderBottom = '2px solid #f00'
                    break;
                case 2 :
                    this.parentNode.style.color = '#666'
                    this.parentNode.style.borderBottom = '0.5px solid #d1d405'
                    break;
                case 3 :
                    this.parentNode.style.color = '#ccc'
                    this.parentNode.style.textDecoration = "line-through #000"
                    break;
            }
    
        });
        lists.querySelector('i').addEventListener('click',function(){
            this.parentNode.remove();
        })
    
    });

Comments

[tokio-k]

ミス

Answer 1

こんにちは

以下は、 MDN の querySelector() の説明からの引用です。

Document の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。

上記に 最初の Element を返します。 と書いてあるとおり、ご質問のコードにある、下記の部分

lists.querySelector('p').addEventListener('click',function(){

の lists.querySelector('p') は、常に lists に含まれる最初の <p> を返します。そのため、

なぜか最初の一つにしか付きません。

ということになります。

何らかの修正をして、直前に追加されたリストアイテムに含まれる <p> を取得して、それに対して addEventListener を行うようにすればよいです。

例えば、下記のように修正してみると、いかがでしょうか？

lists.querySelector('li:last-of-type > p').addEventListener('click',function(){

以上、参考になれば幸いです。

Comments

[tokio-k]

なるほど！
完璧に気づきませんでした