How to Change Content when clicked using JavaScript

In this article, we'll embark on a journey into the realm of JavaScript, exploring the art of changing text or image content directly by clicking on the item itself. Not only will we delve into how to make these modifications with ease, but we'll also unveil the secret sauce to revert the changes when the same item is clicked again. This elegant and intuitive behavior can be a game-changer for user experience, feedback mechanisms, or creating interactive toggles.

So, whether you're a seasoned developer seeking to refine your skills or a newcomer eager to learn the ropes, this guide is tailored to provide you with a comprehensive understanding of this invaluable JavaScript technique. We'll break down the process into manageable steps, supply you with practical examples, and demystify the core concepts behind event handling and DOM manipulation.

This is your HTML for Image:

<img src="https://try.siddharthkamra.in/example/green-iceland.jpg" id="image-to-toggle" style="width:250px; border-radius:8px;" alt="Image 1" onclick="toggleImage()">

This is your HTML for Text:

<p id="text-to-toggle" onclick="toggleText()">This is Original Text, Click it!</p>

This is your JavaScript:

// JavaScript code
var image = document.getElementById("image-to-toggle");
var text = document.getElementById("text-to-toggle");

// Create an Image object to preload the second image
var preloadedImage = new Image();
preloadedImage.src = "https://try.siddharthkamra.in/example/northern-lights.jpg";

// Create arrays with the URLs of the two images, two text values, and two alt texts you want to toggle
var imageUrls = ["https://try.siddharthkamra.in/example/green-iceland.jpg", "https://try.siddharthkamra.in/example/northern-lights.jpg"];
var altTexts = ["Image 1", "Image 2"];
var textValues = ["This is Original Text, Click it!", "You clicked on it press it again to revert changes"];

// Initialize variables to keep track of the current image, text, and alt text indices
var currentImageIndex = 0;
var currentTextIndex = 0;

function toggleImage() {
// Toggle the image source and alt text between the two URLs and alt texts
currentImageIndex = (currentImageIndex + 1) % imageUrls.length;
image.src = imageUrls[currentImageIndex];
image.alt = altTexts[currentImageIndex];
}

function toggleText() {
// Toggle the text content between the two values
currentTextIndex = (currentTextIndex + 1) % textValues.length;
text.textContent = textValues[currentTextIndex];
}

preloadedImage variable loads the second image along the first one too so that it could be shown immediately when clicked. altTexts variable is used to change the alt text of the Image.

Congratulations! You've successfully learnt to change the content when item is clicked. You can modify it according to your needs. Thank you for joining us on this journey, and we can't wait to see you to create great projects using DOM manipulation. Happy coding!