0

現在todoリストの作成を行っているのですが、作成したリストをコンソールに呼び出す段階で"lists is not defined"のエラー表示が出てきてしまいデータの取得ができません。varを用いてlistsと変数宣言しているのですがなぜエラー表示が出るのでしょうか。解決法を教えていただきたいです。

todoリストの作成は YouTubeの ”JavaScriptの「基礎」が1時間で分かる「超」入門講座【初心者向け】 だれでもエンジニア / 山浦清透” に沿って行っています。
よろしくお願いします。
コンソール画面 
html
index.js

index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
    <meta charset="utf-8">
    <title>ToDo List</title>
</head>
<body>
    <div>
    <h1>ToDo List</h1>
    <style>
            h1{text-align:center; color:rgba(195, 64, 16, 0.83); font-family:fantasy; font-size:80px;}
    </style>
    <form id="form" name="form">
        <input id="input" placeholder="Things to do" type="text">
    </form>
    <style>
              #form{text-align: center;}
    </style>
    <ul class="list-group text-secondary" id="ul"></ul>
    <script src="index.js">
    </script>
    </div>
</body>
</html>

index.js

var form = document.getElementById("form");
var input = document.getElementById("input");
var ul = document.getElementById("ul");
form.addEventListener("submit", function (event) {
    event.preventDefault();
    add();
});
function add() {
    var li = document.createElement("li");
    li.innerText = input.value;
    li.classList.add("list-group-item");
    ul.appendChild(li);
    input.value = "";
   saveData();
 }
}  
function saveData(){var lists=
document.querySelectorAll("li");
 console.log(lists);
}
8
  • 1
    いただいたソースコードではsyntaxエラーは出るものの、それを解消する(function saveData()の前の{を消す)と問題なく動くようです。質問にあるようなエラーは出てきません。もう一度ソースコードを見直すか正しくコピペしてみてください
    – keitaro_so
    2021年10月15日 0:57
  • こちらに添付したコードをコピペして試しましたがやはりエラー表示がでてきます。実際の画面を画像添付しましたので確認していただきたいです。よろしくお願いします。
    – Suzu
    2021年10月15日 1:59
  • console.log(lists);のコンソールは正しく出ているようです。画像を見るとdebuggerのエラーのようです。debuggerに何か仕込んでいませんか?ブラウザを変えてみるとおそらく正しく動くと思います。
    – keitaro_so
    2021年10月15日 2:05
  • listssaveData() 関数のローカル変数ですので、コンソール(global scope)からは参照できません。
    – metropolis
    2021年10月15日 2:09
  • @keitaro_so firefoxで開いているのですがエクスプローラーを使うとページが表示されなくなってしまいます。どちらのブラウザが有効なのでしょうか...
    – Suzu
    2021年10月15日 5:05

0

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

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