javascript classlistadd class名が追加されません

実現したいこと

javascript内で追加したliタグにclass名を付与したいのですが、
classlist.addを使用しても追加できません。

前提

・テキストを入力後、ボタンをクリックしたらliタグが追加され、入力されたテキストが作業中エリア内にリスト表示される。
・追加されたliタグへ、class「complete-btn」、「delete-btn」を付与したい。
⇨classlist.addを使用してますが、class名が追加されないです。
またエラーメッセージも確認できておりません。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="src/base.css">
6    <title>lesson08 Todoリスト</title>
7</head>
8<body> 
9    <!-- 入力エリア -->
10    <div class="input-area">
11        <input id="add-text" placeholder="Todoを入力" />
12        <button id="add-button" onclick="onClickAdd()">追加</button>
13    </div><!-- input-area -->
14
15    <div class="container">
16        <!-- 作業中エリア -->
17        <div class="incomp-area">
18            <p class="area-title">タスク</p>
19            <ul id="incomp-area-list">
20            </ul>
21        </div><!-- incomp-area -->
22
23        <!-- 完了エリア -->
24        <div class="comp-area">
25            <p class="area-title">完了</p>
26            <ul id="comp-area-list">
27            </ul>
28        </div><!-- comp-area -->
29    </div><!-- container -->
30
31    <script src="src/index.js"></script>
32</body>
33</html>

javascript
1const form = document.getElementById("add-text");
2const btn = document.getElementById("add-button");
3
4const onClickAdd = () => {
5  const value = form.value;
6  console.log(value);
7  const element = document.getElementById('incomp-area-list');
8  let li = document.createElement('li');
9  li.textContent = value;
10  element.appendChild(li);
11  form.value = '';
12  let list = element.getElementsByTagName('li');
13  let len = list.length;
14  console.log(len);
15  for(let i = 0; i< len; i++){
16  list[i].classList.add('complete-btn');
17  }
18}

css
1body {
2    font-family: sans-serif;
3}
4
5input {
6    border-radius: 8px;
7    border: none;
8    padding: 6px 16px;
9    outline: none;
10    width: 240px;
11}
12
13button {
14    border-radius: 16px;
15    border: none;
16    margin: 8px;
17    padding: 4px 16px;
18}
19button:hover {
20    background-color: #ff7fff;
21    color: #fff;
22    cursor: pointer;
23}
24
25.input-area {
26    background-color: #c1ffff;
27    height: 44px;
28    margin: 8px;
29    padding: 8px;
30    border-radius: 8px;
31}
32
33.container {
34    display: flex;
35}
36
37.incomp-area {
38    background-color: #c6ffe2;
39    width: 50%;
40    min-height: 200px;
41    margin: 8px 0 8px 8px;
42    padding: 8px;
43    border-radius: 8px;
44    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
45}
46
47.comp-area {
48    background-color: #ffffe0;
49    width: 50%;
50    min-height: 200px;
51    margin: 8px;
52    padding: 8px;
53    border-radius: 8px;
54    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
55}
56
57.area-title {
58    text-align: center;
59    padding-bottom: 8px;
60    margin-top: 0;
61    font-weight: bold;
62    color: #666;
63    border-bottom: solid 1px black;
64}
65.incomp-area-list-detail{
66    display: flex;
67    justify-content: center;
68    align-items: center;
69}
70.incomp-area-list-detail>button:nth-of-type(1){
71    margin-left: auto
72}
73ul{
74    padding-left:0
75}
76
77ul li {
78    list-style: none;
79    overflow-wrap: break-word;
80}
81ul li .complete-btn{
82    border-radius: 8px;
83    background-color: #4D89FF;
84    color: white;
85}
86ul li .complete-btn:hover{
87    background-color: #9ACFFF;
88    cursor: pointer;
89}
90
91ul li .delete-btn{
92    border-radius: 8px;
93    background-color: #cc3300;
94    color: white;
95}
96ul li .delete-btn:hover{
97    background-color: #FF6A6A;
98    cursor: pointer;
99}
100
101ul li .return-btn{
102    border-radius: 8px;
103    background-color: #03D00B;
104    color: white;
105}
106ul li .return-btn:hover{
107    background-color: #95FF99;
108    cursor: pointer;
109}

試したこと

javascript内の15~17行目を削除して、
代わりに、list.classList.add('complete-btn');と入力したら、
add('complete-btn')部分に
Uncaught TypeError: Cannot read properties of undefined (reading 'add')とエラーが出ました。
なぜ、classlist.addが効かないのか、色々調べても分からなかったため、質問させていただきました。

maisumakun

2023/09/11 03:36

> classlist.addを使用してますが、class名が追加されないです。追加されないことはどのように確認しましたか？

Lhankor_Mhy

2023/09/11 03:40

『classlist.addを使用してますが、class名が追加されないです』とのことですが、"complete-btn"というクラスが追加されているようでした。

int32_t

2023/09/11 03:58

コードは問題ないように見えます。 list[i].classList.add('complete-btn'); のあとに console.log(list[i].outerHTML); を足すとコンソールで結果が確認できるかと思います。 > 代わりに、list.classList.add('complete-btn');と入力この検証は意味がないので、その結果は気にする必要はありません。

koteharu

2023/09/11 04:10

コメント、ありがとうございます。すいません、検証不足でした。検証ツールでclassの「complete-btn」が追加されたことは確認できました。 cssでcomplete-btnに設定しているスタイルが適用されていなかったです。コードに問題ない場合、何が原因なのでしょうか。

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

回答1件

ベストアンサー

css
1ul li .complete-btn{
2    ...
3}
4ul li .complete-btn:hover{
5    ...
6}

ul li .complete-btn というセレクタは、「<ul> の子孫の <li> の子孫の complete-btn クラスを持つ要素」にマッチします。この場合は <li> に子要素がないので何にもマッチしません。「<ul> の子孫の complete-btn クラスを持つ <li>」にマッチさせたいなら、間の空白を消して ul li.complete-btn と書きましょう。
この場合は .complete-btn だけでもいいでしょう。セレクタに ul がない方がマッチング処理は速くなります。