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

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

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);
    }
    
```
CC BY-SA 4.0
2021-10-14T22:09:06.877
83100
2021-10-15T01:59:34.263
2021-10-15T01:59:34.263
48605
48605
question
javascript
undefined のエラー表示について