如何让我的图像替换 javascript 代码以在 external.js 文件中工作

Question

所以我是 web 开发（职业转变）的新手，我遇到了一个我似乎无法逾越的障碍。

我正在尝试编写一个脚本来更改我的 HTML 中的 img src。当我使用内联 JavaScript 时，它会执行我想要的操作并替换图像：

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

但是当我将它传输到我的 external.js 文件时，我收到一个语法错误，指出showImage未定义。 我该如何解决这个问题？

这是写在外部文件中的代码

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

有人建议我在 HTML 中使用 addEventListener 而不是 onclick 所以我已经这样做了，但我相信它在完全错误的地方并且做了错误的事情

我试过在浏览器控制台中运行以下命令，它运行得很好，但我仍然无法从外部文件中运行它

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

Answer 1

问题解决了！

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

上面没有工作的原因是因为我对 window.addEventListener('load', (event) => { // all code here; }); 做错了。 但删除后图像出现在按钮上点击