时间戳

首页 > 解决方案 > 向我的 javascript 添加一个事件侦听器，该侦听器需要使用我的下拉值来对犬种列表进行排序

javascript - 向我的 javascript 添加一个事件侦听器，该侦听器需要使用我的下拉值来对犬种列表进行排序

问题描述

//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)
},

)



})
}

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

<!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>

标签： javascriptarraysdomaddeventlistener

解决方案

  1. 在函数中保存dogs数据。breeds（声明全局变量）
  2. 用于dogs在change侦听器中过滤

检查狙击手

      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));
      });


let dogs;

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);
  
  // save dogs data
  dogs = doggo;
  
  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) => {
    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));
  });
<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>

推荐阅读