Así que soy nuevo en el desarrollo web (cambio de carrera) y me estoy encontrando con un obstáculo que parece que no puedo superar.

Estoy tratando de escribir un script que cambie el img src en mi HTML. Cuando uso JavaScript en línea, hace lo que quiero y reemplaza la imagen:

 <img id="book1" src="placeholder" alt="Book1"> <h5 class="title">TITLE by Author Name</h5> <p>Book description</p> <div class="center"> <button type="button" class="amz-btn" id="btn1" onclick="showImage()">Buy from Amazon</button> <script type="text/javascript"> function showImage() { let image = document.getElementById("book1"); if (image.src.match("placeholder")) { image.src = "https://storage.googleapis.com/du-prd/books/images/9781538728529.jpg"; } else { console.log("This is frustrating"); } } </script>

Pero cuando lo transfiero a mi archivo .js externo, aparece un error de sintaxis que dice que showImage no está definido. ¿Cómo puedo resolver esto?

Aquí está el código tal como está escrito en el archivo externo

 document.getElementById("btn1").addEventListener("click", showImage) function showImage() { let image = document.getElementById("book1"); if (image.src.match("placeholder")) { image.src = "https://storage.googleapis.com/du-prd/books/images/9781538728529.jpg"; } else { console.log("This is frustrating"); } }

Alguien sugirió que use addEventListener en lugar de hacer clic en el HTML, así que lo hice, pero estoy seguro de que está en el lugar equivocado y está haciendo lo incorrecto.

Intenté ejecutar lo siguiente en la consola del navegador y funciona perfectamente, pero aún no puedo hacer que funcione desde el archivo externo

 const img = "https://storage.googleapis.com/du-prd/books/images/9781538728529.jpg"; document.getElementById("btn1").addEventListener("click", showImage); function showImage() { document.getElementById("book1").src = img; }