【javascript】Todoリストの期限と状態の作成について

実現したいこと

javascript初心者です。サイトを参考にしながら、javascriptで、Todoリストを作成しています。
Taskを追加した際に、自動でTaskに期限と状態を一緒に表示をするように実装したいのですが、わかりません。
何方かアドバイスをお願いします。
※下記のソースコードは引用テキストを雛形として参考にし、装飾等はサイトを検索して、カスタムをしています。

引用テキスト https://www.youtube.com/watch?v=jKZaReN8Avk&t=7s

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>TODOLIST JAVASCRIPT</title>
6    <link rel="stylesheet" href="font/Rimouski.css">
7    <link rel="stylesheet" href="css/style.css">
8    <script src="js/main.js" defer></script>
9</head> javascript
10<body>
11    <h1>TODOLIST</h1>
12    <div id="date"></div>
13    <div id='container'>
14        <input type='text' placeholder='Please enter your Todo' id='text-input'>
15        <p class="font-weight-bold">No</p>   
16        <p class="font-weight-bold">Title</p>   
17        <p class="font-weight-bold">Priority</p>   
18        <p class="font-weight-bold">Deadline</p>   
19        
20        
21        <ol id='todo-list'　name="date" type="date"></ol>
22        <select>
23            <option>High priority</option>
24            　<option selected>Normal priority</option>
25        　　　　<option>Low priority</option>
26        </select>
27            <label>
28            　<input type="date">
29            </label>
30   </div>
31</body>
32</html>

javascript
1
2'use strict';
3
4const dateElement = document.getElementById("date");
5const textInput = document.getElementById('text-input');
6const todolist = document.getElementById('todo-list');
7const priority = document.querySelector('select'); 
8const option = {weekday:"long", month:"short", day:"numeric"};
9const today = new Date();
10dateElement.innerHTML = today.toLocaleDateString("en-US", option);
11
12textInput.addEventListener('keydown', e => {
13    const text = textInput.value.trim();
14
15    if(text === '' || e.key !== 'Enter') {
16        return;
17    }
18   
19    
20    const li = document.createElement('li');
21    const span = document.createElement('span');
22    const button = document.createElement('button');
23    
24    li.classList.add('list-item');
25    
26    span.textContent = text;
27    span.classList.add('todo-text');
28
29    button.textContent = 'Delete';
30    button.type = 'button';
31    button.classList.add('delete-button');
32    button.addEventListener('click', e => {
33        todolist.removeChild(e.target.closest('li'));
34    });
35
36    li.appendChild(span);
37    //li.appendChild(select);
38    //li.appendChild(input[type="date"]);
39    li.appendChild(button);
40    todolist.appendChild(li);
41    
42    textInput.value = '';
43   
44});

hope_mucci

2021/06/12 18:46

・コードは```と```で括って表示するよう修正してください。以前の質問にも同様の依頼を書いたはずです。右側のプレビューもよく確認すること。・HTML、CSS、javascriptはコードブロックを分けて書くとよりフレンドリーです。・参考にしているサイトのURLも書くとより回答者への情報が増えて回答しやくすなると思います。

m.ts10806

2021/06/12 23:22

質問は編集できます。コードがベタで提示されただけの状態だと冒頭のインデントや空白が詰められ、質問者と同じ状態がこちらの手元で再現できない状態になります。つまり、回答者の勝手な解釈や想像で補完する必要があり、本質から離れるので、解決に繋がりにくくなります。そういう配慮はしてください。

edu

2021/06/13 03:26

hope_mucci様、m.ts10806様、自身の質問の表示の仕方の配慮が足りず、申し訳ございません。アドバイスを元に再度、編集しました。よろしくお願いします。

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

回答1件

ベストアンサー

まず、html側の入力部品にidをつけましょう。javascript側で中の値を取り出す際に必要です。

html
1<select id="select-priority">  <-優先度のselect要素
2（中略）
3<input type="date" id="input-deadline">  <- 期限のinput要素

次に、タスク登録処理の際にそれぞれの入力値を取り出します。querySelector関数を使いcssのようなセレクタ指定で要素を取得できます。どちらもvalueプロパティで選択値を取り出せます。

js
1  // 入力した日付の値を取得 input[type="date"]要素のvalueから。
2  let deadline = document.querySelector('#input-deadline').value;
3  // 入力した優先度の値を取得 select要素のvalueから。
4  let priority = document.querySelector('#select-priority').value;

現在はtodoのtextだけをspanに入れていますが、とりあえずこの中にpriorityとdeadlineを一緒に入れてしまいましょう。

js
1  // とりあえず単純に取得した文字列を連結する。
2  span.textContent = text + " " + priority + " " + deadline;
3  // こんな書き方もできますよ（テンプレート文字列）
4  span.textContent = `${text} ${priority} ${deadline}`;