如何在单击按钮时刷新图像？——详解实现步骤

2024-03-07 03:47:19

如何在单击按钮时刷新图像

在互动式网页应用中，动态更新图像可以提供交互性和吸引力。本文将指导您在用户点击按钮时刷新图像的具体步骤。

方法

1. HTML 结构

在 HTML 中，创建一个按钮，当用户单击时将触发图像更新。

<button id="refresh-image">刷新图像</button>
<div id="image-container"></div>

2. JavaScript 函数

使用 JavaScript 定义一个函数，该函数将获取图像源并更新 DOM 中的图像。

function refreshImage() {
  // 获取图像源
  const imageSource = "path/to/image.jpg";

  // 更新图像容器中的图像
  document.querySelector("#image-container").innerHTML = `<img src="${imageSource}">`;
}

3. 事件监听器

将事件监听器附加到按钮，当用户单击按钮时调用刷新图像函数。

document.querySelector("#refresh-image").addEventListener("click", refreshImage);

示例代码

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <button id="refresh-image">刷新图像</button>
  <div id="image-container"></div>

  <script>
    function refreshImage() {
      const imageSource = "path/to/image.jpg";
      document.querySelector("#image-container").innerHTML = `<img src="${imageSource}">`;
    }

    document.querySelector("#refresh-image").addEventListener("click", refreshImage);
  </script>
</body>
</html>