0

すみませんコードの張り方がわからず 変な風になってしまいました、
ご教示いただけると幸いです

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>やることリスト</title>
        <link rel="stylesheet" href="todo.css">
    <body>
        <div id="container">
             <h1>やることリスト</h1>
             <input type="text" id="text_name">
             <input type="button" value="追加" onclick="add()">
             <ul id="todoList"></ul>
        </div>
        <script>
            window.onload = function() {
                box = localStorage.getItem('key');
                for (var i =0; i < box.length; i++) {
                    var li = document.createElement('li');
                    li.textContent = box[i]
                    document.getElementById('todoList').appendChild(li);
                }
            }
            function add() {
                var box = [];
                var input = document.getElementById("text_name");
                box.push(input.value);

                localStorage.setItem('key', box);

                for (var i =0; i < box.length; i++) {
                    var li = document.createElement('li');
                    li.textContent = box[i]
                    document.getElementById('todoList').appendChild(li);
                }
            }
        </script>
    </body>
</html>
3
  • 1
    質問本文中に問題点およびどういった動作を期待しているかをきちんと記述してください。また動きを確認すると削除されているわけではなくて、データ自体は残っていて正しいデータが保存されていないようです
    – keitaro_so
    2020年10月30日 1:03
  • コードをざっと見る限り、「複数の項目を追加できない問題」と「ページ再訪で単一の項目でも正しく復元できない」という問題がありそうです。どの問題を解決したいですか?
    – int32_t
    2020年10月30日 13:43
  • 1
    訂正: 画面上で複数の項目を追加するのはできてそうですね。保存はうまくいってませんが。
    – int32_t
    2020年10月30日 14:33

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。