teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

文法の修正

2021/07/22 08:00

投稿

You
You

スコア52

title CHANGED
File without changes
body CHANGED
@@ -107,6 +107,54 @@
107
107
  [How to pass created element to another function
108
108
  ](https://stackoverflow.com/questions/65124892/how-to-pass-created-element-to-another-function)
109
109
 
110
+ ```js
111
+ //onclickが動かない問題
112
+
113
+ function renderTodo(todo) {
114
+ let list = document.getElementById('todoList');
115
+ let li = document.createElement('li');
116
+ li.setAttribute('class', 'todo__item');
117
+ li.setAttribute('check', todo.checked);
118
+ li.setAttribute('id', todo.id);
119
+ li.innerHTML += `
120
+ ${todo.text}
121
+ <svg class="todo__icon">
122
+ <use xlink:href="img/sprite.svg#icon-cross"></use>
123
+ </svg>
124
+ `;
125
+
126
+ document.querySelector('.todo__icon').onclick = function (e) {
127
+ const parentLi = this.parentElement;
128
+ parentLi.style.border = 'solid red';
129
+ }
130
+
131
+ list.appendChild(li);
132
+ }
133
+
134
+ //addEventListnerが動かない問題
135
+
136
+ function renderTodo(todo) {
137
+ let list = document.getElementById('todoList');
138
+ let li = document.createElement('li');
139
+ li.setAttribute('class', 'todo__item');
140
+ li.setAttribute('check', todo.checked);
141
+ li.setAttribute('id', todo.id);
142
+ li.innerHTML += `
143
+ ${todo.text}
144
+ <svg class="todo__icon">
145
+ <use xlink:href="img/sprite.svg#icon-cross"></use>
146
+ </svg>
147
+ `;
148
+
149
+ document.querySelector('.todo__item svg').addEventListener('click',()=>{
150
+ const parentLi = this.parentElement;
151
+ parentLi.style.border = 'solid red';
152
+ })
153
+
154
+ list.appendChild(li);
155
+ }
156
+ ```
157
+
110
158
  ### 補足情報(FW/ツールのバージョンなど)
111
159
 
112
160
  ここにより詳細な情報を記載してください。