images don't show up except first image

when I open the web browser, I can see the first page with a dog picture and everything's working except showing dog pictures. it only shows alt message. :( here is my code

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

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

const fetchData = (url) => { return fetch(url) .then( res => res.json()); }

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

fetchData('https://dog.ceo/api/breed/hound/list') .then( data => generateOptions(data.message))

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

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

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

const fetchBreedImage = () => { const breed = select.value; const img = card.querySelector('img'); const p = card.querySelector('p'); fetchData(https://dog.ceo/api/breed/${breed}/images/random) .then( data => { img.src = data.message; img.alt = breed; p.textContent = click image to view more ${breed}s; }) }

// ------------------------------------------ // EVENT LISTENERS // ------------------------------------------ select.addEventListener('change', fetchBreedImage); card.addEventListener('click', fetchBreedImage);

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