Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the text and image by just clicking a button in JavaScript?
The text given to an particular element and the image given in an img element can be easily changed using the JavaScript. We can use the onclick event with the button element in the HTML document to make this happen when the button is clicked. To change the text on click to the button we assign a function to the onclick event as the value which performs the required changes.
Let us understand the methods of changing the text and the image individually using JavaScript in details with the help of code examples.
Changing text of an element
JavaScript provide us with the two different properties to change or get the text of an element in the HTML document, both of these properties are listed below with their functionalities and syntaxes −
innerText − The innerText property of JavaScript is used to change the previous text or to get the previous text of a particular selected element from the HTML document.
Syntax
Following syntax will show you hoe to use the innerText property to get and change the text of an element −
selected_element.innerText = " new text ";
innerHTML − The innerHTML propertynot only gives the text of an element with all the sub tags used inside it but it can also change the text of an element with the sub tags used in the new text.
Syntax
Following syntax will show you how to use the innerHTML property to get or change the text an element −
selected_element.innerHTML = " new text ";
Let us understand both of these properties by their practical implementations inside a code example −
Algorithm
Step 1 − In the first step, we will add the input element to the HTML document. So that, we can change the text of the below paragraphs with the text entered by the user.
Step 2 − In this step, we will add a button tag with an onclick event associated with it which takes a function as its value and call it when user clicks the button and changes the text of the paragraphs.
Step 3 − In the next step, we will define a JavaScript function where we will grab the input text entered by the user and use the innerText and the innerHTML property to change the text of the paragraphs below on the page.
Example
The example below will explain you the practical use of the innerText and the innerHTML property 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 have changed the text f two different paragraphs using the innerText and the innerHTML property. The text of former one is changed using the innerText property. While, the text of later one is changed using the innerHTML property.
Changing the image on click to the button
We have already discussed that how we can change the text of an element in HTML document using JavaScript. No, we will discuss how a image can be changed just by clicking the button using JavaScript.
JavaScript allow us to use the src property to change as well as to get the value of the given link or address of the image given to an img element in the src attribute.
Syntax
Following syntax will show how to use the src property to change the image on a web page −
selected_img_element.src = " new link or address ";
Let us now understand the practical implementation of the src property to change the image with the help of JavaScript code example −
Algorithm
Step 1 − In the first step, we will add a img element in the HTML document with src attribute that contains some initial value and later we will change that value with the help of src property using JavaScript.
Step 2 − In the next step, we will add a button element with the onclick event which will call a function when the button is clicked.
Step 3 − In this step, we will define the JavaScript function and grab the img element inside it by its id.
Step 4 − In the last step, we will change the value of the src attribute using the src property and give it a new value to show some new image on the web page. Every time, the button is clicked user will toggle between the two images on each click.
Example
Below example will explain how the src property takes the new value to replace the previous value of src attribute as well as 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 have used the src property to change the value of the src attribute of img element and the actual image on the web page.
In this article, we have learned about the two different methods of changing the text of an element on the web page using JavaScript as well as a method of changing the image on the web page in details with the help of code examples for each one of them. These examples will help you in enhancing your practical knowledge of JavaScript.
17K+ Views
