フォームに書いた文字をliタグとして表示させたい

前提・実現したいこと

JavaScriptでTodoリストを作っている。
フォームの中にタスクを書いて、ボタンを押すと
１．ulの中にliが作成される
２．作成されたliの中にフォームに書いた内容を入れる
の動作をさせたい。

発生している問題・エラーメッセージ

ボタンを押しても何も起こらない。

todo.html:1 Unchecked runtime.lastError:
 The message port closed before a response was received.

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <haed>
4    <meta charset = "utf-8">
5    <script src = "jquery-3.6.0.min.js"></script>
6    <link rel  ="stylesheet" href = "todo.css">
7  </haed>
8  <body>
9    <h1>To do list</h1>
10    <!--やるべきことをリストに追加するボタン-->
11    <form>
12      <input class = "task" type = "text">
13      <button class= "decide" type = "button">追加</button>
14    </form>
15
16    <div class = "table">
17      <h3>タスクリスト</h3>
18      <ul class = "task-list"></ul>
19    </div>
20    
21    <script src = "todo.js"></script>
22  </body>
23</html>

JavaScript
1const inputInfo = document.getElementsByClassName('task')
2const outputInfo = document.getElementsByClassName('task-list')
3
4
5//追加ボタンの機能
6//追加ボタンが押されたときの処理
7document.getElementsByClassName('decide').onclick = function(inputInfo){
8  //ulの中にliを追加する
9  //まず、liを作成→親のulの中に子要素として入れる
10  const lists = document.createElement('li');
11  const inul = outputInfo.appendChild(lists);
12  inul.innerHTML = inputInfo;
13};

m.ts10806

2021/11/28 05:02

本件と直接関係はないのですが、jQueryの機能を使わないなら読み込ませる必要ないのでは。

Fujice

2021/11/28 08:04 編集

そうでした、jQueryの勉強もしていたのでつい読み込ませてしまいました。削除しておきます。ありがとうございました。

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

回答1件

ベストアンサー

javascript
1const inputInfo = document.getElementsByClassName('task')
2const outputInfo = document.getElementsByClassName('task-list')
3
4document.getElementsByClassName('decide')[0].onclick=function(e) {//<--eに変更
5  const lists = document.createElement('li');
6  const inul = outputInfo[0].appendChild(lists);
7  inul.innerHTML = inputInfo[0].value;
8};