search

Home  >  Article  >  Web Front-end  >  How to change text and images by clicking a button in JavaScript?

How to change text and images by clicking a button in JavaScript?

王林
王林forward
2023-09-07 14:25:021195browse

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

You can use JavaScript to easily change the text assigned to a specific element and the image specified in the img element. We can use the onclick event with the button element in the HTML document so that this happens when the button is clicked. To change the text of a button on click, we assign a function to the onclick event as the value that performs the required changes.

Let’s learn more about using JavaScript to change text and images separately through code examples.

Change the text of an element

JavaScript provides us with two different attributes to change or get the text of an element in an HTML document. These two attributes, their functions and syntax are listed below -

  • innerText - The innerText property of JavaScript is used to change the previous text or get the previous text of a specific selected element from the HTML document.

grammar

The following syntax will show you how to use the innerText property to get and change the text of an element -

selected_element.innerText = " new text ";

  • innerHTML The -innerHTML attribute not only provides the text of the element and all subtags used inside it, but also changes the text of the element and the subtags used inside it to new text.

grammar

The following syntax will show you how to use the innerHTML attribute to get or change the text of an element -

selected_element.innerHTML = " new text ";

Let us understand these two properties through the actual implementation in the code example -

algorithm

  • Step 1 - In the first step, we add the input element to the HTML document. This way we can change the text of the following paragraph with the text entered by the user.

  • Step 2 - In this step we will add a button label with an onclick event associated with it that will take a function as its value and when the user clicks the button and calls it when the paragraph's text changes.

  • Step 3 - In the next step we will define a JavaScript function in which we will grab the input text entered by the user and change the text using innerText and innerHTML properties The paragraph below on the page.

Example

The following example will explain you how to use the innerText and innerHTML properties to change the text of an element -

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

In the above example, we changed the text of two different paragraphs using the innerText and innerHTML properties. The text of the previous one is changed using the innerText property. At the same time, the text of the latter text is changed using the innerHTML attribute.

Change image when button is clicked

We've discussed how to use JavaScript to change the text of an element in an HTML document. No, we are going to talk about how to change an image just by clicking a button using JavaScript.

JavaScript allows us to use the src attribute to change as well as get the value of a given link or the image address of an img element in a given src attribute.

grammar

The following syntax will show how to use the src attribute to change the image on the web page -

selected_img_element.src = " new link or address ";

Now let us understand the actual implementation of changing the image with the src attribute with the help of a JavaScript code example -

algorithm

  • Step 1 - In the first step we will add an img element to the HTML document with some initial values ​​in its src attribute, later we will Use JavaScript to change this value using the src attribute.

  • Step 2 - In the next step, we will add a button element with an onclick event that will call a function when the button is clicked.

  • Step 3 - In this step, we will define a JavaScript function and get the img element within it by its id.

  • Step 4 - In the final step, we will use the src attribute to change the value of the src attribute and assign it a new value to display some new images on the web page. Each time the button is clicked, the user will switch between the two images with each click.

Example

The following example will explain how the src attribute uses the new value to replace the previous value of the src attribute and the previous image on the web page -

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

In the above example, we use the src attribute to change the src attribute value of the img element and the actual image on the web page.

In this article, we took a closer look at two different ways to change the text of an element on a web page using JavaScript and how to change an image on a web page with code examples for each of them. These examples will help you enhance your practical knowledge of JavaScript.

The above is the detailed content of How to change text and images by clicking a button in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html 事件 innerHTML 算法
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to disable your browser's back button using JavaScript?Next article：How to disable your browser's back button using JavaScript?

Related articles

See more