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

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

ただいまの
回答率

87.92%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 205

score 19

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

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

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

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

該当のソースコード

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section class="header">
        <div id="myDIV" class="header__wrapper">
            <h2 class="header__title">My To Do List</h2>
            <input type="text" id="myInput" placeholder="Title...">
            <span class="header__btn btn addBtn">Add</span>
        </div>
    </section>

    <section class="todo">
        <ul id="myUL" class="todo__list">
            <li class="todo__item">Hit the gym</li>
            <li class="todo__item">Hit the gym</li>
            <li class="todo__item checked">Read a book</li>
            <li class="todo__item">Hit the gym</li>
            <li class="todo__item">Hit the gym</li>
            <li class="todo__item">Hit the gym</li>
        </ul>
    </section>
    <script src="js/script.js"></script>
</body>

</html>
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
}

.btn {
  padding: 1rem;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  text-align: center;
  font-size: 1.6rem;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 0;
}

.btn:hover {
  background-color: #bbb;
}

.todo__list {
  margin: 0;
  padding: 0;
}

.todo__item {
  cursor: pointer;
  position: relative;
  padding: 1.2rem 0.8rem 1.2rem 4rem;
  background: #eee;
  font-size: 1.8rem;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.todo__item:nth-child(odd) {
  background: #f9f9f9;
}

.todo__item:hover {
  background: #ddd;
}

.todo__item.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

.todo__item.checked::before {
  content: "";
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 1rem;
  left: 1.6rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 1.2rem 1.6rem 1.2rem 1.6rem;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

.header__wrapper {
  background-color: #f44336;
  padding: 3rem 4rem;
  color: white;
  text-align: center;
}

.header__wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.header__title {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

input {
  margin: 0;
  bottom: none;
  border-radius: 0;
  width: 75%;
  padding: 1rem;
  font-size: 1.6rem;
}
/*# sourceMappingURL=style.css.map */
// const myNodeItem = document.querySelectorAll('.todo__item');

// var i;
// for (i = 0; i < myNodeItem.length; i++) {
//     const span = document.createElement('span');
//     const txt = document.createTextNode('\u00d7');
//     span.className = 'close';
//     span.appendChild(txt);
//     myNodeItem[i].appendChild(span);
// }

// const close = document.getElementsByClassName('close');
// var i;
// for (i = 0; i < close.length; i++) {
//     close[i].onclick = function () {
//         const div = this.parentElement;
//         div.style.display = 'none';
//     }
// }

// const list = document.querySelector('.todo__list');
// list.addEventListener('click', function (ev) {
//     if (ev.target.tagName === 'li') {
//         ev.target.classList.toggle('checked');
//     }
// }, false);

// function newElement() {
//     const li = document.createElement('li');
//     const inputValue = document.getElementById('myInput').value;
//     const t = document.createTextNode(inputValue);
//     li.appendChild(t);
//     if (inputValue === '') {
//         alert('You must write something');
//     } else {
//         document.getElementById(myInput).appendChild(li);
//     }
//     document.getElementById('myInput').value = '';

//     const span = document.createElement('span');
//     const txt = document.createTextNode('\u00d7');
//     span.className = 'close';
//     span.appendChild(txt);
//     li.appendChild(span);

//     for (i = 0; i < close.length; i++) {
//         close[i].onclick = function () {
//             const div = this.parentElement;
//             div.style.display = 'none';
//         }
//     }
// }

// const btn = document.querySelector('.addBtn');
// console.log(btn);
// btn.addEventListener('click',function(){
//     newElement();
// });
// const myNodeItem = document.querySelectorAll('.todo__item');

// var i;
// for (i = 0; i < myNodeItem.length; i++) {
//     const span = document.createElement('span');
//     const txt = document.createTextNode('\u00d7');
//     span.className = 'close';
//     span.appendChild(txt);
//     myNodeItem[i].appendChild(span);
// }

// const close = document.getElementsByClassName('close');
// var i;
// for (i = 0; i < close.length; i++) {
//     close[i].onclick = function () {
//         const div = this.parentElement;
//         div.style.display = 'none';
//     }
// }

// const list = document.querySelector('.todo__list');
// list.addEventListener('click', function (ev) {
//     if (ev.target.tagName === 'li') {
//         ev.target.classList.toggle('checked');
//     }
// }, false);

// function newElement() {
//     const li = document.createElement('li');
//     const inputValue = document.getElementById('myInput').value;
//     const t = document.createTextNode(inputValue);
//     li.appendChild(t);
//     if (inputValue === '') {
//         alert('You must write something');
//     } else {
//         document.getElementById(myInput).appendChild(li);
//     }
//     document.getElementById('myInput').value = '';

//     const span = document.createElement('span');
//     const txt = document.createTextNode('\u00d7');
//     span.className = 'close';
//     span.appendChild(txt);
//     li.appendChild(span);

//     for (i = 0; i < close.length; i++) {
//         close[i].onclick = function () {
//             const div = this.parentElement;
//             div.style.display = 'none';
//         }
//     }
// }

// const btn = document.querySelector('.addBtn');
// console.log(btn);
// btn.addEventListener('click',function(){
//     newElement();
// });


var myNodeList = document.getElementsByTagName('li');
var i;
for (i = 0; i < myNodeList.length; i++) {
    var span = document.createElement('span');
    var txt = document.createTextNode('\u00d7');
    span.className = 'close';
    span.appendChild(txt);
    myNodeList[i].appendChild(span);
}


var close = document.getElementsByClassName('close');
var i;
for (i = 0; i < close.length; i++) {
    close[i].onclick = function () {
        var div = this.parentElement;
        div.style.display = 'none';
    }
}

var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
    if (ev.target.tagName === 'li') {
        ev.target.classList.toggle('checked');
    }
}, false);

function newElement() {
    var li = document.createElement('li');
    var inputValue = document.getElementsByID('myInput').value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert('You must write something');
    } else {
        document.getElementById('myUL').appendChild(li);
    }
    document.getElementsByID('myInput').value = '';

    var span = document.createElement('span');
    var txt = document.createTextNode('\u00d7');
    span.className = 'close';
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function () {
            var div = this.parentElement;
            div.style.display = 'none';
        }
    }
}

const addButton = document.querySelector('.addBtn');
addButton.addEventListener('click', function () {
    newElement();
})

試したこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+2

- document.getElementsByID
+ document.getElementById

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/05 20:58

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

    キャンセル

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

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る