【JavaScript 】JSONPlaceholderを使ってAPIを実行したい

実現したいこと

APIの取得、実行

前提

JavaScriptでプルダウンした項目に合わせて
Todoデータの検索ができるように実装しようとしています。

TodoデータはJSONPlaceholderから取得したいです。

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

まず、APIの取得ができません。
エラーなどは出ておらず、何も変わらない状態です。
原因がわからないので、力を貸して頂きたいです。

該当のソースコード

CSS
1#sampleForm {
2    margin: 20px 0 0 20px;
3}
4
5#box {
6    margin: 20px 0 0 20px;
7    width: 320px;
8    height: 180px;
9    background-color: #fdd;
10}
11#list li {
12    list-style-type: disc;
13    margin-left: 40px;
14}
15
16.error {
17    font-size: 12px;
18    color: #f00;
19    display: none;
20}

index.html
1<body>
2    <div id="wrapper">
3        <form id="sampleForm" method="post" action="">
4            Completed: 
5            <select name="select">
6                <option value="">全件</option>
7                <option value="0">未完了</option>
8                <option value="1">完了</option>
9            </select>
10            <button type="submit" id="submit" onclick="getData()">Email表示</button>
11        </form>
12        <!-- ここにリスト表示 -->
13        <ul id="list">
14            <li></li>
15        </ul>
16    </div><!-- wrapper -->
17
18    <script>
19        // APIを実行する
20        async function getData() {
21            try {
22                const response = await fetch('https://jsonplaceholder.typicode.com/todos');
23                const datas = await response.json();
24                console.log(datas)
25            } catch(e) {
26                // API実行失敗
27                console.log(e)
28            }
29        }

試したこと

以下のコードは実装可能でした。

index.html
1<head>
2    <meta charset="UTF-8">
3</head>
4<body>
5    <div id="wrapper" >
6        <button onclick="getData()">API呼び出し</button>
7    </div><!-- wrapper -->
8
9    <script>
10        async function getData() {
11            try {
12                const response = await fetch('https://jsonplaceholder.typicode.com/users');
13                const datas = await response.json();
14                console.log(datas)
15            } catch(e) {
16                // API実行失敗
17                console.log(e)
18            }
19        }
20    </script>

行動規範の内容に同意します

回答1件

ベストアンサー

単純にサブミットをとめてないからでは？

javascript
1<script>
2async function getData() {
3  event.preventDefault();
4  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
5  const datas = await response.json();
6  datas.forEach(x=>list.appendChild(Object.assign(document.createElement('li'),{textContent:x.title})));
7}
8</script>
9<div id="wrapper">
10<form method="post">
11Completed: 
12<select name="select">
13<option value="">全件</option>
14<option value="0">未完了</option>
15<option value="1">完了</option>
16</select>
17<button type="submit" onclick="getData()">Email表示</button>
18</form>
19<ul id="list">
20</ul>
21</div>