Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the text and image by just clicking a button in JavaScript?
In JavaScript, you can dynamically change text content and images by using the onclick event with button elements. This allows for interactive web pages where content updates in response to user actions.
Let us explore how to change text and images individually using JavaScript with practical examples.
Changing Text of an Element
JavaScript provides two main properties for modifying element text content:
innerText ? Changes or retrieves the plain text content of an element, ignoring HTML tags.
innerHTML ? Changes or retrieves the HTML content of an element, including any HTML tags within it.
Syntax
// Using innerText for plain text selected_element.innerText = "new text"; // Using innerHTML for HTML content selected_element.innerHTML = "new text with <b>HTML tags</b>";
Example: Changing Text with User Input
<html lang="en">
<body>
<h2>Changing Text of Elements using JavaScript</h2>
<p>Enter text below and click the button to see the difference between innerText and innerHTML:</p>
<input type="text" id="textInput" placeholder="Enter your text here">
<br><br>
<button onclick="changeText()">Click to Change Text</button>
<p id="para1">This text will be changed using innerText.</p>
<p id="para2">This text will be changed using innerHTML.</p>
<script>
function changeText() {
var input = document.getElementById("textInput");
var para1 = document.getElementById("para1");
var para2 = document.getElementById("para2");
var enteredText = input.value;
para1.innerText = enteredText + " - Changed using innerText";
para2.innerHTML = "<b>" + enteredText + "</b> - Changed using <em>innerHTML</em>";
}
</script>
</body>
</html>
Changing Images with JavaScript
To change images dynamically, use the src property of image elements. This property allows you to get or set the image source URL.
Syntax
selected_img_element.src = "new_image_url.jpg";
Example: Image Toggle with Button
<html>
<body>
<h2>Changing Images using JavaScript</h2>
<p>Click the button below to toggle between two images:</p>
<img src="/javascript/images/light-mode.png" id="toggleImage" alt="Mode Image" width="200">
<br><br>
<button onclick="toggleImage()">Toggle Image</button>
<p id="status">Current: Light Mode</p>
<script>
function toggleImage() {
var image = document.getElementById("toggleImage");
var status = document.getElementById("status");
if (image.src.includes("light-mode.png")) {
image.src = "/javascript/images/dark-mode.png";
status.innerHTML = "Current: <b>Dark Mode</b>";
} else {
image.src = "/javascript/images/light-mode.png";
status.innerHTML = "Current: <b>Light Mode</b>";
}
}
</script>
</body>
</html>
Combined Example: Text and Image Changes
Here's a comprehensive example that demonstrates both text and image changes together:
<html>
<body>
<h2>Dynamic Content Update Example</h2>
<input type="text" id="messageInput" placeholder="Enter your message">
<button onclick="updateContent()">Update Content</button>
<div style="margin-top: 20px;">
<p id="displayText">Your message will appear here</p>
<img src="/javascript/images/default.png" id="contentImage" alt="Content Image" width="150">
</div>
<script>
var imageIndex = 0;
var images = [
"/javascript/images/image1.png",
"/javascript/images/image2.png",
"/javascript/images/image3.png"
];
function updateContent() {
var input = document.getElementById("messageInput");
var textDisplay = document.getElementById("displayText");
var image = document.getElementById("contentImage");
// Update text
textDisplay.innerHTML = "<strong>Message:</strong> " + input.value;
// Cycle through images
image.src = images[imageIndex];
imageIndex = (imageIndex + 1) % images.length;
}
</script>
</body>
</html>
Key Differences: innerText vs innerHTML
| Property | Purpose | HTML Tags | Use Case |
|---|---|---|---|
innerText |
Plain text only | Ignored/stripped | Simple text updates |
innerHTML |
HTML content | Rendered as HTML | Rich formatting needed |
Conclusion
JavaScript's innerText, innerHTML, and src properties provide powerful ways to create interactive web content. Use innerText for plain text, innerHTML for formatted content, and src for dynamic image updates through button clicks.
22K+ Views
