jsの配列の挙動が理解できない

前提・実現したいこと

javascript初心者です。

簡単なtodolistを作成したくて作成した順にidを割り当てて値と同時に出力したいです。しかし思うように動かなかったので質問しました。

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

出力結果:入力した値+undefind
が出力されてしまいます。

自分は「id+入力した値」を出力結果としてだしたいです。何がおかしいのかわからないので教えていただけないでしょうか？

該当のソースコード

html
1<body>
2  <h1>todo list</h1>
3  <div>
4    <input type="text" id="item">
5    <button type="button" id='click-function'>Add</button>
6  </div>
7  <ul id="todoList"></ul>
8  <script src="index.js"></script>
9</body>

js
1const myfunc = document.getElementById('click-function');
2myfunc.addEventListener('click',function(){
3    let todoItems = [];
4    let todoItem = document.getElementById('item').value;
5    todoItems.push(todoItem);
6    todoItems.forEach((value,index,array) => {
7        let li = document.createElement('li');
8        li.textContent = todoItems[index] + todoItems[value];
9        document.getElementById('todoList').appendChild(li);
10    })
11        
12})
13

m.ts10806

2020/04/18 04:47

＞javascript初心者です。「初心者アイコン」を質問に付与するにとどめてください。

m.ts10806

2020/04/18 04:48

ただ「簡単なtodolistを作成したくて」と仰っていますが、入力内容はどこにも保存しないということで良いのでしょうか。今は画面リロードレベルでクリアされるようになってると思います。

退会済みユーザー

2020/04/18 04:51

>「初心者アイコン」を質問に付与するにとどめてください。了解しました。今後気を付けます。今はそれで大丈夫です。まだ勉強し始めて間もないので。ただいずれはできるようにはしたいです。ご指摘ありがとうございました！

m.ts10806

2020/04/18 05:22

「今後」で忘れず対応できる人ってまずいないので、今この質問で対応しておいてください。一度でも自ら経験しておけば後で思い出すのは容易いですが、今は「他人に注意された」だけの段階です。他人事なのでかならず抜けます。

退会済みユーザー

2020/04/18 05:40

ご指摘ありがとうございます。了解しました。今からすぐに取り掛かります。

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

回答2件

ベストアンサー

"ABC"という文字列を入力したとすると、forEachの引数の関数が呼ばれるときには、

JavaScript
1todoItems は ["ABC"]
2value は "ABC"
3index は 0
4array は ["ABC"]

という値です。従って、todoItems[index]は"ABC"、todoItems[value]はundefinedです。

おそらく、li.textContent = index + " " + value:がやりたいことでしょう。
"0 ABC"がセットされます。

投稿2020/04/18 04:42

otn

総合スコア84538

退会済みユーザー

2020/04/18 04:56

ありがとうございます。解説を読んですんなり納得できました。 li.textContent = todoItems[index] + todoItems[value];の部分を li.textContent = index + value; に書き換えたら「id+入力した値」が出力されました。しかしidが常に0なのですがこれは何が原因なのでしょうか？配列に値を格納していくのでindexの値も自動的に増えていくのではないのでしょうか？追加で質問してしまいすみません。

otn

2020/04/18 05:24

todoItemsという変数は、関数が呼ばれる度に作られて、関数が終了すると消えます。 let todoItems = []; を関数の外に出せば、ページをリロードするまでは値が保持されます。単純に出すだけだと、クリックする度に変数にある物全件が「追加」されるので、・増えた分だけliを追加する・liを一旦全部削除してから、全件追加するのどちらかが必要ですね。

退会済みユーザー

2020/04/18 06:55

なるほどです！がんばってみます！

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

forEach内の todoItems[index] と value は同じ物を指している。

js
1    todoItems.forEach((value,index,array) => {
2        let li = document.createElement('li');
3        li.textContent = value;
4        document.getElementById('todoList').appendChild(li);
5    })