📌  相关文章
📜  如何通过单击 JavaScript 中的按钮来更改文本和图像？(1)

📅  最后修改于: 2023-12-03 15:24:56.797000             🧑  作者: Mango

如何通过单击 JavaScript 中的按钮来更改文本和图像

在 JavaScript 中，我们可以使用事件监听器来监听按钮的点击事件，进而根据需要对文本和图像进行修改。下面我们来介绍一下如何实现这个功能。

监听器的绑定

我们可以通过 document.querySelector() 方法来获取一个按钮的元素对象，然后通过 Element.addEventListener() 方法来为该按钮绑定一个点击事件监听器。例如：

const btn = document.querySelector('#myButton');

btn.addEventListener('click', function() {
  // 点击事件发生时执行的代码
});
修改文本内容

我们可以通过 Element.textContent 或者 Element.innerHTML 属性来修改文本内容。例如，我们可以使用以下代码将一个段落元素的文本内容修改为 "Hello World!"：

const para = document.querySelector('p');
para.textContent = 'Hello World!'; // 或 para.innerHTML = 'Hello World!';
修改图像

我们可以通过 HTMLImageElement.src 属性来修改图像的 URL，进而更改图片。例如，我们可以使用以下代码将一张图片的 URL 修改为 "newImage.jpg"：

const img = document.querySelector('img');
img.src = 'newImage.jpg';
示例代码

以下是一个完整的示例代码，其中点击按钮将会修改一个段落元素的文本内容，同时更换一张图片：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>按钮点击事件</title>
</head>
<body>
  <p id="myPara">原文本内容</p>
  <img src="oldImage.jpg" alt="原图片">
  <br>
  <button id="myButton">点击我</button>

  <script>
    const para = document.querySelector('#myPara');
    const img = document.querySelector('img');
    const btn = document.querySelector('#myButton');

    btn.addEventListener('click', function() {
      para.textContent = '新文本内容';
      img.src = 'newImage.jpg';
    });
  </script>
</body>
</html>

注意：在实际项目中，我们通常会将 JavaScript 代码放在一个单独的文件中，并通过 <script> 标签引入，而不是直接写在 HTML 文件中。