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

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

ただいまの
回答率

89.09%

【JavaScript】appendChildが上手くできず、下に追加されていくのではなく、上書きのように最初のリストの上から重なってしまいます。

解決済

回答 2

投稿 編集

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

azufb

score 2

前提・実現したいこと

初めて質問を投稿させて頂きます。
現在、カウントダウンタイマー付きTodoリストというアプリを作成しております。
使用言語は、HTML・CSS・JavaScriptです。

タイマーの部分はなんとかできたのですが、Todoリストの部分でつまづいております。
入力欄にタスクを入力し、追加ボタンを押すと、
リスト状(黒丸なし)にタスクが追加されていく機能を作っております。
下に追加されていく、appendChildでリストに追加する手法を使っているのですが、
タスクを入力してみて、追加ボタンを押すと、
下に追加されるのではなく、上書きされてしまいます。
なんとか、きちんとappendChildを機能させ、どんどん下に追加させるように
したのですが、何か良い方法をご存知の方はいらっしゃいますでしょうか?
ご回答頂けましたら、幸いです。よろしくお願いいたします。

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

コンソールにエラーメッセージの表示はありません。

該当のソースコード

①HTMLファイル

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Countdown To Do List</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        〜中略〜
            <div class="input-text">
                <h2 class="content-title">LISTS</h2>
                <input type="text" placeholder="タスクを入力してください" id="newtodo">
                <button type="button" id="add-button">追加</button>
            </div>
            <ul id="my-list">
                <li>buy a cake</li>
            </ul>
            <footer>
                <p class="footer">&copy;All rights reserved by Azusa Okamoto.</p>
            </footer>
        <script src="timer.js"></script>
        <script src="todolist.js"></script>
    </body>
</html>

②JavaScriptファイル(Todoリスト用)
こちらの、li.appendChild(t)がきちんと動作していないのではと、推測しております。

// タスク追加

document.getElementById("add-button").onclick=function () {
    var li = document.createElement("li");
    var inputValue = document.getElementById("newtodo").value;
    var t = document.createTextNode(inputValue);
    if (inputValue === '') {
        alert("タスクを入力してください!");
    }
    else {
        document.getElementById("my-list").appendChild(li);
        li.appendChild(t);
    }

    document.getElementById("newtodo").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";
        }
    }
}

試したこと

appendChildの部分を、insertBeforeに変更してみたり、
id名ではなく、querySelectorで選択してみたりもしました。
直前で、変数inputValueやtを宣言する時に.valueの位置等を変更してみたりしました。
ずっと考えすぎても、いつまでも動けないままになってしまうので、
質問させて頂きました。

補足情報(FW/ツールのバージョンなど)

使用しているツール
MacBook Pro
VS Code
Google Chrome

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • YakumoSaki

    2020/06/29 20:39

    手元のChromeで、貼って頂いたHTMLの <script src="todolist.js"></script> の部分に
    貼って頂いているJavascriptをそのまま入れて実行してみましたが、TODOの追加が出来ました。

    ブラウザの開発者ツールでデバッグ実行などを試してみると解決のヒントがあるかもしれません。

    キャンセル

  • yambejp

    2020/06/29 21:05

    不要な部分をばっさり削って聞きたい箇所だけ抽出したソースでお問い合わせください

    キャンセル

  • azufb

    2020/06/29 21:26

    YakumoSaki様
    一度、HTML内に入れてみましたが、やはり動きませんでした。

    キャンセル

  • azufb

    2020/06/29 21:28

    yambejp様
    わかりにくくしてしまい、申し訳ございませんでした。
    質問したい部分のコードに絞って、質問を修正をいたしました。

    キャンセル

回答 2

checkベストアンサー

0

とりあえずリストの追加、削除にしぼりました

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/06/29 21:33 編集

    <script>
    window.addEventListener('DOMContentLoaded', ()=>{
    const addClose=x=>{
    const span = document.createElement("SPAN");
    const txt = document.createTextNode("\u00D7");
    span.classList.add("close");
    span.appendChild(txt);
    x.appendChild(span);
    }
    const myList=document.querySelector('#my-list');
    const addButton=document.querySelector("#add-button");
    const newTodo = document.querySelector("#newtodo");

    myList.querySelectorAll('li').forEach(x=>{
    addClose(x);
    });

    myList.addEventListener('click',e=>{
    if(e.target.classList.contains('close')){
    const li=e.target.closest('li');
    li.parentNode.removeChild(li);
    }
    });

    addButton.addEventListener('click',()=>{
    const v=newTodo.value;
    if (v === '') {
    alert("タスクを入力してください!");
    }else{
    const li = document.createElement("li");
    myList.appendChild(li);
    li.appendChild(document.createTextNode(v));
    addClose(li);
    newTodo.value = "";
    }
    });
    });
    </script>
    <div class="input-text">
    <h2 class="content-title">LISTS</h2>
    <input type="text" placeholder="タスクを入力してください" id="newtodo">
    <button type="button" id="add-button">追加</button>
    </div>
    <ul id="my-list">
    <li>buy a cake</li>
    </ul>

    キャンセル

  • 2020/06/30 11:34

    ご回答くださり、ありがとうございます。
    ご回答下さったコードを貼り付けると、動きました。リストの削除の部分のコードは特に今自分が書いているコードよりもわかりやすいです。参考にさせて頂きます。すみませんでした。

    キャンセル

0

htmlのbodyの中身とjsを張り付けただけですが動きますよ。
close[i]はどこから来たのか謎ですがappendChildは問題ないような。
https://jsfiddle.net/sousuke/87azw13j/3/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/06/30 11:29

    ご回答くださり、ありがとうございます。
    そのまま貼り付けてもできなかったのですが、一度、問題の部分のみ、CSSを解除すると、動きました。
    どうやら、CSSが邪魔していたようでした。すみません。

    キャンセル

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

  • ただいまの回答率 89.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • JavaScriptに関する質問
  • 【JavaScript】appendChildが上手くできず、下に追加されていくのではなく、上書きのように最初のリストの上から重なってしまいます。