作成したtodoリストに新しいリストを追加できない問題を解決したい。

addボタンを押した時に新しいリストを追加したい。

addボタンを押した時にエラーが表示される。

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

script.js:148 Uncaught TypeError: document.getElementsByID is not a function
    at newElement (script.js:148)
    at HTMLSpanElement.<anonymous> (script.js:174)

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    <link rel="stylesheet" href="css/style.css">
10</head>
11
12<body>
13    <section class="header">
14        <div id="myDIV" class="header__wrapper">
15            <h2 class="header__title">My To Do List</h2>
16            <input type="text" id="myInput" placeholder="Title...">
17            <span class="header__btn btn addBtn">Add</span>
18        </div>
19    </section>
20
21    <section class="todo">
22        <ul id="myUL" class="todo__list">
23            <li class="todo__item">Hit the gym</li>
24            <li class="todo__item">Hit the gym</li>
25            <li class="todo__item checked">Read a book</li>
26            <li class="todo__item">Hit the gym</li>
27            <li class="todo__item">Hit the gym</li>
28            <li class="todo__item">Hit the gym</li>
29        </ul>
30    </section>
31    <script src="js/script.js"></script>
32</body>
33
34</html>

css
1* {
2  -webkit-box-sizing: border-box;
3          box-sizing: border-box;
4  padding: 0;
5  margin: 0;
6}
7
8html {
9  font-size: 62.5%;
10}
11
12.btn {
13  padding: 1rem;
14  width: 25%;
15  background: #d9d9d9;
16  color: #555;
17  text-align: center;
18  font-size: 1.6rem;
19  cursor: pointer;
20  -webkit-transition: 0.3s;
21  transition: 0.3s;
22  border-radius: 0;
23}
24
25.btn:hover {
26  background-color: #bbb;
27}
28
29.todo__list {
30  margin: 0;
31  padding: 0;
32}
33
34.todo__item {
35  cursor: pointer;
36  position: relative;
37  padding: 1.2rem 0.8rem 1.2rem 4rem;
38  background: #eee;
39  font-size: 1.8rem;
40  -webkit-transition: 0.2s;
41  transition: 0.2s;
42}
43
44.todo__item:nth-child(odd) {
45  background: #f9f9f9;
46}
47
48.todo__item:hover {
49  background: #ddd;
50}
51
52.todo__item.checked {
53  background: #888;
54  color: #fff;
55  text-decoration: line-through;
56}
57
58.todo__item.checked::before {
59  content: "";
60  position: absolute;
61  border-color: #fff;
62  border-style: solid;
63  border-width: 0 2px 2px 0;
64  top: 1rem;
65  left: 1.6rem;
66  -webkit-transform: rotate(45deg);
67          transform: rotate(45deg);
68  height: 15px;
69  width: 7px;
70}
71
72.close {
73  position: absolute;
74  right: 0;
75  top: 0;
76  padding: 1.2rem 1.6rem 1.2rem 1.6rem;
77}
78
79.close:hover {
80  background-color: #f44336;
81  color: white;
82}
83
84.header__wrapper {
85  background-color: #f44336;
86  padding: 3rem 4rem;
87  color: white;
88  text-align: center;
89}
90
91.header__wrapper::after {
92  content: "";
93  display: table;
94  clear: both;
95}
96
97.header__title {
98  font-size: 1.6rem;
99  margin-bottom: 2rem;
100}
101
102input {
103  margin: 0;
104  bottom: none;
105  border-radius: 0;
106  width: 75%;
107  padding: 1rem;
108  font-size: 1.6rem;
109}
110/*# sourceMappingURL=style.css.map */

js
1// const myNodeItem = document.querySelectorAll('.todo__item');
2
3// var i;
4// for (i = 0; i < myNodeItem.length; i++) {
5//     const span = document.createElement('span');
6//     const txt = document.createTextNode('\u00d7');
7//     span.className = 'close';
8//     span.appendChild(txt);
9//     myNodeItem[i].appendChild(span);
10// }
11
12// const close = document.getElementsByClassName('close');
13// var i;
14// for (i = 0; i < close.length; i++) {
15//     close[i].onclick = function () {
16//         const div = this.parentElement;
17//         div.style.display = 'none';
18//     }
19// }
20
21// const list = document.querySelector('.todo__list');
22// list.addEventListener('click', function (ev) {
23//     if (ev.target.tagName === 'li') {
24//         ev.target.classList.toggle('checked');
25//     }
26// }, false);
27
28// function newElement() {
29//     const li = document.createElement('li');
30//     const inputValue = document.getElementById('myInput').value;
31//     const t = document.createTextNode(inputValue);
32//     li.appendChild(t);
33//     if (inputValue === '') {
34//         alert('You must write something');
35//     } else {
36//         document.getElementById(myInput).appendChild(li);
37//     }
38//     document.getElementById('myInput').value = '';
39
40//     const span = document.createElement('span');
41//     const txt = document.createTextNode('\u00d7');
42//     span.className = 'close';
43//     span.appendChild(txt);
44//     li.appendChild(span);
45
46//     for (i = 0; i < close.length; i++) {
47//         close[i].onclick = function () {
48//             const div = this.parentElement;
49//             div.style.display = 'none';
50//         }
51//     }
52// }
53
54// const btn = document.querySelector('.addBtn');
55// console.log(btn);
56// btn.addEventListener('click',function(){
57//     newElement();
58// });
59// const myNodeItem = document.querySelectorAll('.todo__item');
60
61// var i;
62// for (i = 0; i < myNodeItem.length; i++) {
63//     const span = document.createElement('span');
64//     const txt = document.createTextNode('\u00d7');
65//     span.className = 'close';
66//     span.appendChild(txt);
67//     myNodeItem[i].appendChild(span);
68// }
69
70// const close = document.getElementsByClassName('close');
71// var i;
72// for (i = 0; i < close.length; i++) {
73//     close[i].onclick = function () {
74//         const div = this.parentElement;
75//         div.style.display = 'none';
76//     }
77// }
78
79// const list = document.querySelector('.todo__list');
80// list.addEventListener('click', function (ev) {
81//     if (ev.target.tagName === 'li') {
82//         ev.target.classList.toggle('checked');
83//     }
84// }, false);
85
86// function newElement() {
87//     const li = document.createElement('li');
88//     const inputValue = document.getElementById('myInput').value;
89//     const t = document.createTextNode(inputValue);
90//     li.appendChild(t);
91//     if (inputValue === '') {
92//         alert('You must write something');
93//     } else {
94//         document.getElementById(myInput).appendChild(li);
95//     }
96//     document.getElementById('myInput').value = '';
97
98//     const span = document.createElement('span');
99//     const txt = document.createTextNode('\u00d7');
100//     span.className = 'close';
101//     span.appendChild(txt);
102//     li.appendChild(span);
103
104//     for (i = 0; i < close.length; i++) {
105//         close[i].onclick = function () {
106//             const div = this.parentElement;
107//             div.style.display = 'none';
108//         }
109//     }
110// }
111
112// const btn = document.querySelector('.addBtn');
113// console.log(btn);
114// btn.addEventListener('click',function(){
115//     newElement();
116// });
117
118
119var myNodeList = document.getElementsByTagName('li');
120var i;
121for (i = 0; i < myNodeList.length; i++) {
122    var span = document.createElement('span');
123    var txt = document.createTextNode('\u00d7');
124    span.className = 'close';
125    span.appendChild(txt);
126    myNodeList[i].appendChild(span);
127}
128
129
130var close = document.getElementsByClassName('close');
131var i;
132for (i = 0; i < close.length; i++) {
133    close[i].onclick = function () {
134        var div = this.parentElement;
135        div.style.display = 'none';
136    }
137}
138
139var list = document.querySelector('ul');
140list.addEventListener('click', function (ev) {
141    if (ev.target.tagName === 'li') {
142        ev.target.classList.toggle('checked');
143    }
144}, false);
145
146function newElement() {
147    var li = document.createElement('li');
148    var inputValue = document.getElementsByID('myInput').value;
149    var t = document.createTextNode(inputValue);
150    li.appendChild(t);
151    if (inputValue === '') {
152        alert('You must write something');
153    } else {
154        document.getElementById('myUL').appendChild(li);
155    }
156    document.getElementsByID('myInput').value = '';
157    
158    var span = document.createElement('span');
159    var txt = document.createTextNode('\u00d7');
160    span.className = 'close';
161    span.appendChild(txt);
162    li.appendChild(span);
163    
164    for (i = 0; i < close.length; i++) {
165        close[i].onclick = function () {
166            var div = this.parentElement;
167            div.style.display = 'none';
168        }
169    }
170}
171
172const addButton = document.querySelector('.addBtn');
173addButton.addEventListener('click', function () {
174    newElement();
175})

試したこと

各々の変数の格納方法を変えた。
const→var

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

回答1件

ベストアンサー

diff
1- document.getElementsByID
2+ document.getElementById

こういうのは、意味を捉えてメソッド名を覚えると良い。
同一idは同じページに一つしかないんだから getElementById、
同一classやnameは同じページに複数ある可能性があるから getElementsByClassName

投稿2021/04/05 09:51

kyoya0819

総合スコア10429

You

2021/04/05 11:58

ありがとうございます。ただ、問題の解決には至りませんでした。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

作成したtodoリストに新しいリストを追加できない問題を解決したい。

addボタンを押した時に新しいリストを追加したい。

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

該当のソースコード

試したこと

関連した質問