JavaScript 如何通过点击一个按钮来改变文本和图像

使用JavaScript可以很容易地改变一个特定元素的文本和一个img元素中的图像。我们可以使用HTML文档中的按钮元素的onclick事件，在点击按钮的时候实现这一功能。为了在点击按钮时改变文本，我们给onclick事件分配一个函数，作为执行所需变化的值。

让我们借助代码实例详细了解一下使用JavaScript单独改变文本和图像的方法。

改变一个元素的文本

JavaScript为我们提供了两个不同的属性来改变或获取HTML文档中某个元素的文本，下面列出了这两个属性的功能和语法。

innerText – JavaScript的innerText属性用于改变前一个文本，或者从HTML文档中获取某个特定元素的前一个文本。

语法

下面的语法将告诉你如何使用innerText属性来获取和改变一个元素的文本。

selected_element.innerText = " new text ";

innerHTML – 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允许我们使用 src 属性来改变，也允许我们在src属性中获取给定链接的值或给定图片的地址。

语法

下面的语法将显示如何使用 src 属性来改变网页上的图像 —

selected_img_element.src = " new link or address ";

现在让我们借助JavaScript代码实例来了解src属性的实际实现，以改变图像

算法

第1步，我们将在HTML文档中添加一个带有src属性的 img 元素，该元素包含一些初始值，随后我们将使用JavaScript在src属性的帮助下改变该值。
第2步 – 在下一步，我们将添加一个带有onclick事件的按钮元素，当按钮被点击时，它将调用一个函数。
第 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的实践知识。