全件表示しているものの中からAPIを通して条件に合致しているものだけを表示させる

実現したいこと

APIにてTODOデータを取得しulタグにリスト表示させます・
selectで全件が選択されているとTODOデータのtitleの値が表示され、
selectで未完了が選択されるとTODOデータのcompletedがfalseの値だけを表示
selectで完了が選択されるとTODOデータのcompletedがtrueの値だけを表示するという内容が完成系です。

前提

ここに質問の内容を詳しく書いてください。

前回の質問解決策を教えていただき、で条件に合ったfalseとtrueの値を取得でき、コンソールで表示することができたのですが、それをHTML要素で埋め込もうとしているのですが、エラーすら起きず何も反応が起きません。

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

appendChildで新しくli要素を追加したものの反応がなし。
情報が拾えておらず、エラーもなし
エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson06 検索フォーム</title> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body> <div id="wrapper"> <form id="sampleForm" method="post" action=""> Completed: <select name="select" id="select"> <option value="">全件</option> <option value="0">未完了</option> <option value="1">完了</option> </select> <button type="submit" id="submit" onclick="getData()">Email表示</button> </form>  <ul id="list"> <li></li> </ul> </div>

<script>
    const lists=document.querySelector("#list");
    const submit=document.querySelector("#submit");
    async function getData() {
        event.preventDefault();
        const response = await fetch('https://jsonplaceholder.typicode.com/todos');
        const data = await response.json();
        data.forEach(e=>list.appendChild(Object.assign(document.createElement('li'),{textContent:e.title})));
    };
    
    
    window.addEventListener('DOMContentLoaded', async()=>{
        const data=await fetch('https://jsonplaceholder.typicode.com/todos').then(res=>res.json());
        //全件
        const data_all=data.map(x=>x.title);
        console.log(data_all);
        //未完了
        const data_uncompleted=data.filter(x=>!x.completed).map(x=>x.title);
        console.log(data_uncompleted);
        //完了
        const data_completed=data.filter(x=>x.completed).map(x=>x.title);
        console.log(data_completed);
    });

    
    const button=document.querySelector('#submit');
    const ulList=document.querySelector("#list");
    button.addEventListener('submit',(lists)=>{
        const select=document.querySelector('#select');
        if(select.value===''){
            const elLi=document.createElement('li');
            elLi.innerHTML=data_all
            ulList.appendChild(elLi);
        }else if(select.value==='0'){
            const elLi2=document.createElement('li');
            elLi.innerHTML=data_uncompleted
            ulList.appendChild(elLi2);
        }else if(select.value==='1'){
            const elLi3=document.createElement('li');
            elLi.innerHTML=data_uncompleted
            ulList.appendChild(elLi3);
        }});


   </script>

</body> </html> ```ここに言語名を入力ソースコード JavaScript

試したこと

処理の順番がいけないのかとbutton.addEventListenerの処理を下に持ってきたり場所を変更したのですが、変化なしでした

何度も同じ質問をしてしまって申し訳ないのですが、ご教授お願いします、、、

補足情報（FW/ツールのバージョンなど）

css の表記はこちらです
#sampleForm {
margin: 20px 0 0 20px;
}

#box {
margin: 20px 0 0 20px;
width: 320px;
height: 180px;
background-color: #fdd;
}
#list li {
list-style-type: disc;
margin-left: 40px;
}

.error {
font-size: 12px;
color: #f00;
display: none;
}

yambejp

2023/10/18 08:03

提示されたソースが前回に引き続きくずれています。ただしくマークダウンしてください

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

回答2件

現在のコードの方針で行くなら、

変数 data_all data_uncompleted data_completed をグローバル変数にする
<button> で submit イベントは起きないと思うので、click イベントに変える
そのイベントリスナの中で、select.value が空のときは data_all、'0' のときは data_uncompleted、'1' のときは data_completed に対して forEach() をして、配列要素から <li> を作成する

などの変更が必要そうです。

投稿2023/10/18 21:23

int32_t

総合スコア21933

myunhen0301

2023/10/19 12:11

回答ありがとうございます！

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

ベストアンサー

変数がコードブロック {...} の中で宣言された場合は、そのブロックの中でだけ見えます。
コードブロック | 変数スコープ、クロージャ

というとおりですので、

js
1//...
2    const data_completed = data.filter(x => x.completed).map(x => x.title);
3    console.log(data_completed);
4});
5// ここより下では、data_completed は見えない。