最近Javascriptの勉強をしていて、ToDoリストの作成をしているのですが、タスクの追加ができません。
最近Javascriptの勉強をしていて、ToDoリストの作成をしているのですが、タスクの追加ができません。 間違っているところはコンソールで出るのですが何が間違ってるかわかりません。 下記にHTMLとjsのコードがあるのでわかる方お教えください。 また、「ここはこうするといいよ」みたいなのもあればご指摘いただけると幸いです。 【HTML】 <body> <div class="add-form" > <!-- コメント入力フォーム --> コメント <input type="text" id="task-text"> <!-- 追加ボタンのモック --> <button class="add-button">追加</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="./main.js"></script> </body> 【ｊｓ】 const add = document.getElementsByClassName('add-button'); add.addEventListener('click', () => {←この行がエラーになってるみたいです。 const input =document.getElementById("task-text"); console.log(input.value); })
JavaScript | HTML、CSS・20閲覧
ベストアンサー
『add.addEventListener』を『add[0].addEventListener』に変更してみてください。 『.getElementsByClassName()』で取得できるのは、条件に合致した「HTMLCollection」です。配列みたいなものと思ってください。 HTMLCollection自体にイベント定義はできないので、内容物に個別に(複数あるならループなりを用いて)イベント定義する必要があります。 見たところ対象要素も一つのようですし、取得時直接Elementオブジェクトを返してくれる『.getElementById()』での要素取得に切り替えた方が処理の上でも何かと無駄がないと思います。 ▼例 ▽HTML 『class="add-button"』→『id="add-button"』 ▽main.js const add = document.getElementsById('add-button'); add.addEventListener('click', () => { const input =document.getElementById("task-text"); console.log(input.value); })
質問者からのお礼コメント
解決できました！ ありがとうございます！！
お礼日時：1/23 11:52
