現在todoリストの作成を行っているのですが、作成したリストをコンソールに呼び出す段階で"lists is not defined"のエラー表示が出てきてしまいデータの取得ができません。varを用いてlistsと変数宣言しているのですがなぜエラー表示が出るのでしょうか。解決法を教えていただきたいです。
todoリストの作成は YouTubeの ”JavaScriptの「基礎」が1時間で分かる「超」入門講座【初心者向け】 だれでもエンジニア / 山浦清透” に沿って行っています。
よろしくお願いします。
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);
}
function saveData()
の前の{
を消す)と問題なく動くようです。質問にあるようなエラーは出てきません。もう一度ソースコードを見直すか正しくコピペしてみてくださいlists
はsaveData()
関数のローカル変数ですので、コンソール(global scope)からは参照できません。