Para agregar a mi archivo index.js, me dan: const imgUrl = "https://dog.ceo/api/breeds/image/random/4"
Esto se combina con el siguiente html en mi index.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>Mis requisitos:
Mi intento fallido me ha llevado aquí:
document.addEventListener('DOMContentLoaded', { const imgUrl = "https://dog.ceo/api/breeds/image/random/4" const imgElement = document.createElement('img') const div = document.getElementById('div') return fetch(imgUrl) .then(res => res.json()) .then (.forEach(img) => { imgElement.appendChild(div) }) })Sé que estoy haciendo muchas cosas incorrectamente. No puedo averiguar cómo agregar a mi elemento usando .forEach. Cualquier entrada es apreciada. Soy un estudiante en el sexto día y estoy luchando.
const imgUrl = "https://dog.ceo/api/breeds/image/random/4" document.addEventListener('DOMContentLoaded', () => { const div = document.getElementById('dog-image-container'); fetch(imgUrl) .then(res => res.json()) .then(res => { res.message.forEach((imgSrc) => { const img = document.createElement('img'); img.src = imgSrc; div.appendChild(img); }) }); }); <div id="dog-image-container"> <!-- images here --> </div>