My code does not really work

Question

Hello there, the code that i have been writing since the start of this workshop has been throwing errors in my console. I have checked it multiple times yet i can't find what's wrong. Here is my code:

const select = document.getElementById('breeds'); const card = document.querySelector('.card'); const form = document.querySelector('form');

// ------------------------------------------ // FETCH FUNCTIONS // ------------------------------------------

function fetchData(url) { return fetch(url) .then(checkStatus) .then(res => res.json()) .catch(error => console.log('Looks like there was a problem', error))

}

fetch('https://dog.ceo/api/breeds/list') .then(data => generateOptions(data.message))

fetch('https://dog.ceo/api/breeds/image/random') .then(data => generateImage(data.message))

// ------------------------------------------ // HELPER FUNCTIONS // ------------------------------------------

function checkStatus(response) { if (response.ok) { return Promise.resolve(); } else { return Promise.reject(new Error(response.statusText)); } }

function generateOptions(data) { const options = data.map(item => <option value='${item}'>${item}</option>).join(''); select.innerHTML = options; }

function generateImage(data) { const html = <img src='${data}' alt> <p>Click to view images of ${select.value}s</p>; card.innerHTML = html; }

function fetchBreedImage() { const breed = select.value; const img = card.querySelector('img'); const p = card.querySelector('p');

fetchData(https://dog.cep/api/breed/${breed}/images/random) .then(data => { img.src = data.message; img.alt = breed; p.textContent = Click to view more ${breed}s }) }

// ------------------------------------------ // EVENT LISTENERS // ------------------------------------------

select.addEventListener('change', fetchBreedImage); card.addEventListener('click', fetchBreedImage)

// ------------------------------------------ // POST DATA // ------------------------------------------

Answer 1 · 2025-06-20T22:40:54Z

June 20, 2025 10:40pm

Hey there Rejan Goci ! 👋

Just a few small issues causing what you're experiencing. It's hard to relate with code lines as your post wasn't utilizing markdown. I'd recommend wrapping code blocks within triple backticks next time so it stays formatted.

1. The second and 3rd fetch() calls in your fetch functions section should actually be calling your fetchData() function instead.

2. Also, you'll want to pass in your response to your Promise.resolve in your checkStatus() function.

3. There is also a typo in the url in your call to fetchData() down near the bottom. ceo is currently cep.

Here's your code with my adjustments and code comments on the lines I did so. I hope this helps!

const select = document.getElementById('breeds');
const card = document.querySelector('.card');
const form = document.querySelector('form');

// ------------------------------------------
// FETCH FUNCTIONS
// ------------------------------------------

function fetchData(url) {
  return fetch(url)
    .then(checkStatus)
    .then(res => res.json())
    .catch(error => console.log('Looks like there was a problem', error))
}

fetchData('https://dog.ceo/api/breeds/list') // <<< changed from fetch to fetchData
  .then(data => generateOptions(data.message))

fetchData('https://dog.ceo/api/breeds/image/random') // <<< changed from fetch to fetchData
  .then(data => generateImage(data.message))

// ------------------------------------------
// HELPER FUNCTIONS
// ------------------------------------------

function checkStatus(response) {
  if (response.ok) {
    return Promise.resolve(response); // <<< added response as an argument to resolve
  } else {
    return Promise.reject(new Error(response.statusText));
  }
}

function generateOptions(data) {
  const options = data.map(item => `
    <option value='${item}'>${item}</option>
  ` ).join('');
  select.innerHTML = options;
}

function generateImage(data) {
  const html = `
    <img src='${data}' alt>
    <p>Click to view images of ${select.value}s</p>
  `;
  card.innerHTML = html;
}

function fetchBreedImage() {
  const breed = select.value;
  const img = card.querySelector('img');
  const p = card.querySelector('p');

fetchData(`https://dog.ceo/api/breed/${breed}/images/random`) // <<< fixed typo of "cep" to "ceo" in url
  .then(data => {
    img.src = data.message;
    img.alt = breed;
    p.textContent = `Click to view more ${breed}s`;
  })
}

// ------------------------------------------
// EVENT LISTENERS
// ------------------------------------------

select.addEventListener('change', fetchBreedImage);
card.addEventListener('click', fetchBreedImage)

// ------------------------------------------
// POST DATA
// ------------------------------------------

Welcome to the Treehouse Community

Looking to learn something new?

Rejan Goci

Rejan Goci

My code does not really work

1 Answer

Travis Alstrand

Travis Alstrand