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

可以使用JavaScript轻松地更改给定元素的文本以及给定的img元素中的图像。我们可以在HTML文档中使用按钮元素的onclick事件来实现在按钮被点击时发生更改。要在点击按钮时更改文本，我们将一个函数分配给onclick事件作为执行所需更改的值。

让我们通过代码示例详细了解如何使用JavaScript分别更改文本和图像的方法。

更改元素的文本

JavaScript为我们提供了两个不同的属性，用于更改或获取HTML文档中元素的文本，以下是这两个属性及其功能和语法的列表：

innerText - JavaScript的innerText属性用于更改先前的文本或获取HTML文档中特定选定元素的先前文本。

语法

以下语法将向您展示如何使用innerText属性来获取和更改元素的文本：

selected_element.innerText = " new text ";

innerText − innerHTML 属性不仅返回元素中所有子标签使用的文本，还可以将新文本中使用的子标签改变元素的文本。

语法

以下语法将展示如何使用 innerHTML 属性来获取或更改元素的文本 −

selected_element.innerHTML = " new text ";

通过代码示例，让我们来了解这两个属性的实际用途-

步骤

步骤1 - 在步骤1中，我们会将输入元素添加到HTML文档中。这样，我们可以用用户输入的文本来改变下面段落的文本。
步骤2 - 在这一步中，我们会添加一个带有onclick事件的按钮标签，事件关联的值是一个函数。当用户点击按钮时，将调用这个函数并改变段落的文本。
步骤3 - 在下一步中，我们会定义一个JavaScript函数。在这个函数中，我们会获取用户输入的文本，并使用innerText和innerHTML属性来改变页面下方段落的文本。

示例

下面的示例将解释如何实际使用innerText和innerHTML属性来改变元素的文本-

<html lang = "en">
<body>
   <h2>Changing an Text of an element in the HTML document using JavaScript.</h2>
   <p id = "upper">The text of the below element will be replaced by the text you enter in input bar once you click the button.</p>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeImage()"> Click to change the Text </button>
   <p id = "para1">This is the initial text of Para1.</p>
   <p id = "para2">This is the initial text of Para2.</p>
   <script>
      var para1 = document.getElementById("para1");
      var para2 = document.getElementById("para2");
      function changeImage() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         para1.innerText = enteredText + ", This text is changed using the innerText property. ";
         para2.innerHTML = " <u> " + enteredText + " </u> " + ", <b> This text is changed using the <em> innerHTML </em> property. <b> <br> ";
      }
   </script>
</body>
</html>

在上面的示例中，我们使用innerText和innerHTML属性更改了两个不同段落的文本。前一个段落的文本使用innerText属性进行了更改。而后一个段落的文本使用innerHTML属性进行了更改。

点击按钮时更改图片

我们已经讨论了如何使用JavaScript在HTML文档中更改元素的文本。现在，我们将讨论如何通过点击按钮仅通过JavaScript更改图像。

JavaScript允许我们使用 src 属性更改并获取img元素的src属性给定链接或图像地址的值。

语法

以下语法将展示如何使用 src 属性在网页上更改图像：

selected_img_element.src = " new link or address ";

现在让我们通过JavaScript代码示例来理解使用src属性来改变图像的实际实现 –

步骤

步骤1 - 在步骤1中，我们将在HTML文档中添加一个带有src属性的img元素，其中包含一些初始值，然后我们将使用JavaScript的src属性来改变该值。
步骤2 - 在下一步中，我们将添加一个带有onclick事件的button元素，当单击按钮时将调用一个函数。
步骤3 - 在此步骤中，我们将定义JavaScript函数，并通过其id获取img元素。
步骤4 - 在最后一步中，我们将使用src属性更改src属性的值，并给它一个新值，以在网页上显示一些新图像。每次单击按钮时，用户将在每次单击时在两个图像之间切换。

示例

以下示例将说明src属性如何获取新值以替换src属性的先前值，以及网页上的先前图像 –

<html>
<body>
   <h2>Changing an Image in the HTML document using JavaScript</h2>
   <p id = "upper">The image shown below will be changed once you click the button.</p>
   <img src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU" id = "image"> <br> <br>
   <button id = "btn" onclick = "changeImage()"> Click to change the Image </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      function changeImage() {
         var image = document.getElementById("image");
         if (image.src ==           "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU") {
            image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU";
            result.innerHTML += " The image is changed from <b> Light mode to Dark mode </b>. <br> ";
         }
         else {
            image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU";
            result.innerHTML += " The image is changed from <b> Dark mode to Light mode </b>. ";
         }
         upper.innerHTML = " The previous image is replaced by the new image as you click the button. <br> ";
      }
   </script>
</body>
</html>

在上面的示例中，我们使用了src属性来改变img元素的src属性值以及网页上实际的图像。

在本文中，我们详细介绍了使用JavaScript在网页上改变元素文本的两种不同方法，以及改变网页上图像的方法，每个方法都有相应的代码示例。这些示例将帮助您增强JavaScript的实际应用知识。