createElementで生成した要素を他の関数で使用する方法を知りたい。

addTodoで生成したliを他の関数で使いたい。

svgアイコンにクリックイベントを付与してクリックされたアイテム、その親を含めて丸ごと削除する為に用いる。

発生している問題

renderTodo()の中身にあるliを他の関数に渡せない問題。

→createElementで生成した要素にクリックイベントを追加する為にグローバル関数でsvgボタンを定義。
const icon = document.querySelector('.todo__item').children;

//エラー
Uncaught TypeError: Cannot read property 'children' of null

該当のソースコード

html
1<div class="todo">
2                <h2 class="heading-2 todo__title">To Do List</h2>
3                <form action="" class="todo__form" id="todoForm">
4                    <input class="todo__input" type="text" id="todoInput">
5                    <button class="todo__button" id="todoButton">add</button>
6                </form>
7                <ul class="todo__list" id="todoList">
8                    <!-- <li class="todo__item">
9                        <svg class="todo__icon">
10                            <use xlink:href="img/sprite.svg#icon-cross"></use>
11                        </svg>
12                    </li>
13                    <li class="todo__item">
14                        <svg class="todo__icon">
15                            <use xlink:href="img/sprite.svg#icon-cross"></use>
16                        </svg>
17                    </li> -->
18                    <!-- <li class="todo__item">
19                        <svg class="todo__icon">
20                            <use xlink:href="img/sprite.svg#icon-cross"></use>
21                        </svg>
22                    </li>
23                    <li class="todo__item">
24                        <svg class="todo__icon">
25                            <use xlink:href="img/sprite.svg#icon-cross"></use>
26                        </svg>
27                    </li>
28                    <li class="todo__item">
29                        <svg class="todo__icon">
30                            <use xlink:href="img/sprite.svg#icon-cross"></use>
31                        </svg>
32                    </li> -->
33                </ul>
34            </div>

js
1let todoList = [];
2
3const todoForm = document.getElementById('todoForm');
4todoForm.addEventListener('submit', event => {
5    event.preventDefault();
6})
7
8const todoButton = document.getElementById('todoButton');
9todoButton.addEventListener('click', () => {
10    const input = document.getElementById('todoInput');
11    const text = input.value.trim();
12    if (text !== '') {
13        addTodo(text);
14        input.value = ''
15        input.focus();
16    }
17})
18
19function addTodo(text) {
20    const todo = {
21        text,
22        checked: false,
23        id: Date.now()
24    };
25    todoList.push(todo);
26    console.log(todoList);
27    renderTodo(todo);
28}
29
30function renderTodo(todo) {
31    let list = document.getElementById('todoList');
32    let li = document.createElement('li');
33    li.setAttribute('class', 'todo__item');
34    li.setAttribute('check', todo.checked);
35    li.setAttribute('id', todo.id);
36    li.innerHTML += `
37    ${todo.text}
38    <svg class="todo__icon">
39    <use xlink:href="img/sprite.svg#icon-cross"></use>
40    </svg>
41    `;
42    list.appendChild(li);
43    return li;
44}
45
46const icon = document.querySelector('.todo__item').children;
47console.log(icon);

試したこと

How to pass created element to another function

js
1//onclickが動かない問題
2
3function renderTodo(todo) {
4    let list = document.getElementById('todoList');
5    let li = document.createElement('li');
6    li.setAttribute('class', 'todo__item');
7    li.setAttribute('check', todo.checked);
8    li.setAttribute('id', todo.id);
9    li.innerHTML += `
10    ${todo.text}
11    <svg class="todo__icon">
12    <use xlink:href="img/sprite.svg#icon-cross"></use>
13    </svg>
14    `;
15
16     document.querySelector('.todo__icon').onclick = function (e) {
17         const parentLi = this.parentElement;
18         parentLi.style.border = 'solid red';
19     }
20
21    list.appendChild(li);
22}
23
24//addEventListnerが動かない問題
25
26function renderTodo(todo) {
27    let list = document.getElementById('todoList');
28    let li = document.createElement('li');
29    li.setAttribute('class', 'todo__item');
30    li.setAttribute('check', todo.checked);
31    li.setAttribute('id', todo.id);
32    li.innerHTML += `
33    ${todo.text}
34    <svg class="todo__icon">
35    <use xlink:href="img/sprite.svg#icon-cross"></use>
36    </svg>
37    `;
38
39    document.querySelector('.todo__item svg').addEventListener('click',()=>{
40        const parentLi = this.parentElement;
41        parentLi.style.border = 'solid red';
42    })
43
44    list.appendChild(li);
45}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

まず一つ目はエラーが出る問題だと思いますが

const icon = document.querySelector('.todo__item').children;

renderTodo 処理が終わる前にこの行が呼ばれると存在しないのでエラーが起こってしまいます。

const iconElement = document.querySelector('.todo__item')
if (iconElement) {
  const icon = iconElement.children
}

のようにするか、クリックイベントの部分に書くか、renderTodo 後に呼び出す位置に移動するなどで問題ないと思います。

本題の他の要素に渡せない(識別できない)問題について

li.setAttribute('id', todo.id); ここで適切に id が振られているのであれば

document.querySelector('.todo_item svg').onclick = function (e) { // this を取るので (e) => は使えない
  const parentLi = this.parentElement
  parentLi.style.border = "solid red"
}

というかたちでクリック時に親要素を取り出せます。

あと id はドキュメント内で一意になるように気をつけてください。

投稿2021/07/21 22:37

anozon

総合スコア662

You

2021/07/22 07:55

回答ありがとうございます。 ””本の他の要素に渡せない(識別できない)問題について” こちらのコードを書いてみたところエラーが表示されてしまいました。 onclickが使用できない問題です。

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

自己解決

js
1function renderTodo(todo) {
2    let list = document.getElementById('todoList');
3    let li = document.createElement('li');
4    li.setAttribute('class', 'todo__item');
5    li.setAttribute('check', todo.checked);
6    li.setAttribute('id', todo.id);
7    li.innerHTML += `
8    ${todo.text}
9    <svg class="todo__icon">
10    <use xlink:href="img/sprite.svg#icon-cross"></use>
11    </svg>
12    `;
13
14    const icon = li.children[0];
15    icon.addEventListener('click', (event) => {
16        const parentElement = icon.parentElement;
17        parentElement.remove();
18    })
19
20    list.appendChild(li);
21}