在我的javascript中添加一个事件监听器，该监听器需要使用我的dropcrown值对狗的品种列表进行排序_Javascript_Arrays_Dom_Addeventlistener

在我的javascript中添加一个事件监听器，该监听器需要使用我的dropcrown值对狗的品种列表进行排序

javascript arrays dom

在我的javascript中添加一个事件监听器，该监听器需要使用我的dropcrown值对狗的品种列表进行排序,javascript,arrays,dom,addeventlistener,Javascript,Arrays,Dom,Addeventlistener,当我输入任何内容时，dogs filter不会返回函数，现在dogs是未定义的。我需要帮助调用正确的数组，然后将捕获的结果打印到HTML aaaaggagahhh，我也可以发布HTML。我的问题从我痛苦的源头开始。忽略这一部分，我只需要使用下拉值对数组进行排序 //console.log('%c HI', 'color: firebrick') document.addEventListener('DOMContentLoaded', () => { ceo(), bre

当我输入任何内容时，dogs filter不会返回函数，现在dogs是未定义的。我需要帮助调用正确的数组，然后将捕获的结果打印到HTML aaaaggagahhh，我也可以发布HTML。我的问题从我痛苦的源头开始。忽略这一部分，我只需要使用下拉值对数组进行排序

//console.log('%c HI', 'color: firebrick')
document.addEventListener('DOMContentLoaded', () => {
    ceo(), 
    breeds()
})


function ceo() {
    const imgUrl = "https://dog.ceo/api/breeds/image/random/4" 
    fetch(imgUrl)
    .then(resp => resp.json())
    .then(json => renderImages(json))
   
}

function renderImages(images) {
    images.message.forEach(renderImage);
}

function renderImage(urlImg){
    const loc = document.getElementById('dog-image-container')
    //console.log(urlImg)
    const img = document.createElement('img')
    //console.dir(img)
    img.className = "dog-image"
    img.height = 300
    img.src = urlImg
    loc.appendChild(img)
    
}

function breeds() {
    const breedUrl = 'https://dog.ceo/api/breeds/list/all' 
    fetch(breedUrl)
    .then(resp => resp.json())
    .then(json => breed(json))
   

}

function breed(dog) {
    const doggo = Object.keys(dog.message)
    doggo.forEach(element => breedList(element)) 
    //dog.message.forEach(dog => dog.breedList);
   
}


function breedList(dogBreeds) {
    const ul = document.getElementById('dog-breeds')
    const li = document.createElement('li')
    li.innerText = dogBreeds
    ul.appendChild(li)
    
ul.addEventListener('click', event => {
    if(event.target.matches('li')) {
        event.target.style.color = 'blue'
    }
})

// the source of my pain
const dropdownLetter = document.querySelector("#breed-dropdown")

dropdownLetter.addEventListener('change', event => {
let dogs = []
const letter = event.target.value
const dogsList = dogs.filter(dogs => {
    return dogs.startsWith(letter)
},

)



})
}


AJAX实践任务简介
狗首席执行官

筛选以以下内容开头的品种：
A.
B
C
D

将

狗

数据保存在

品种

功能中。（声明全局变量）

使用

dogs

在

change

listener中过滤

检查狙击手

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Intro to AJAX Practice Tasks</title>
    <script src="src/index.js" charset="utf-8"></script>
  </head>
  <body>
    <h1>Dog CEO</h1>

    <div id="dog-image-container">
      <!-- images here -->
    </div>

    <hr>
    <label for="select-breed">Filter Breeds That Start with:</label>
    <select id="breed-dropdown" name="select-breed">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
      <option value="d">d</option>
    </select>
   
    <ul id="dog-breeds">

    </ul>

  </body>
</html>

放狗；
document.addEventListener（“DOMContentLoaded”，（）=>{
ceo（），繁殖（）；
});
职能ceo（）{
常量imgUrl=”https://dog.ceo/api/breeds/image/random/4";
获取（imgUrl）
.然后（（resp）=>resp.json（））
。然后（（json）=>渲染（json））；
}
函数渲染（图像）{
images.message.forEach（renderImage）；
}
函数呈现（urlImg）{
const loc=document.getElementById（“狗图像容器”）；
//console.log（urlImg）
const img=document.createElement（“img”）；
//控制台目录（img）
img.className=“狗图像”；
img.高度=300；
img.src=urlImg；
附件儿童（img）位置；
}
函数类型（）{
康斯特布里杜尔=”https://dog.ceo/api/breeds/list/all";
取回（布里杜尔）
.然后（（resp）=>resp.json（））
.然后（（json）=>繁殖（json））；
}
功能品种（狗）{
const doggo=Object.keys（dog.message）；
//保存狗的数据
狗=狗；
doggo.forEach（（元素）=>breedList（元素））；
//dog.message.forEach（dog=>dog.breedList）；
}
功能繁殖列表（狗种）{
const ul=document.getElementById（“犬种”）；
const li=document.createElement（“li”）；
li.innerText=狗种；
ul.儿童（li）；
ul.addEventListener（“点击”，（事件）=>{
if（event.target.matches（“li”））{
event.target.style.color=“蓝色”；
}
});
}
//我痛苦的根源
const dropdownLetter=document.querySelector（“繁殖下拉列表”）；
dropdownLetter.addEventListener（“更改”，（事件）=>{
常量字母=event.target.value；
const dogsList=dogs.filter（（dog）=>{
返回狗。开始使用（字母）；
});
const ul=document.getElementById（“犬种”）；
ul.innerHTML=''；
dogsList.forEach（（元素）=>breedList（元素））；
});
Dog首席执行官

筛选以以下内容开头的品种：
A.
B
C
D

考虑在代码段中添加代码，并添加html内容。
      dropdownLetter.addEventListener("change", (event) => {
        const letter = event.target.value;
        const dogsList = dogs.filter((dog) => {
          return dog.startsWith(letter);
        });
        
        const ul = document.getElementById("dog-breeds");
        ul.innerHTML = '';
        dogsList.forEach((element) => breedList(element));
      });