To change the src attribute of an image when it’s clicked, use the addEventListener method to attach a click event handler and modify the src property.
document.getElementById("myImage").addEventListener("click", function() {
this.src = "new-image.jpg";
});
Changing the src attribute of an image element in response to a click event is a common task in web development. This guide will show you multiple methods to achieve this, providing clear explanations and code examples.
Methods on How to Change Image src in JavaScript OnClick
Changing the src attribute of an image element in JavaScript can be useful for creating interactive web pages. This can be done using various methods, including addEventListener, inline onclick attributes, and external JavaScript files. Each method has its own use cases and advantages.
Using addEventListener
The addEventListener method is a modern and versatile way to handle events in JavaScript. It allows you to attach an event listener to an element without altering the HTML structure.
Example 1: Basic OnClick Change
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Image OnClick</title>
</head>
<body>
<img id="myImage" src="original-image.jpg" alt="My Image" width="200">
<script>
document.getElementById("myImage").addEventListener("click", function() {
this.src = "new-image.jpg";
});
</script>
</body>
</html>
Explanation:
- HTML Structure: An img element with the id of myImage is added to the HTML.
- JavaScript: The addEventListener method is used to attach a click event listener to the image element. When the image is clicked, the src attribute is changed to “new-image.jpg”.
Using Inline OnClick Attribute
Using the onclick attribute directly in HTML is a straightforward method but is generally less preferred due to concerns about mixing HTML and JavaScript.
Example 2: Inline OnClick Change
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Image OnClick</title>
</head>
<body>
<img id="myImage" src="original-image.jpg" alt="My Image" width="200" onclick="changeImage()">
<script>
function changeImage() {
document.getElementById("myImage").src = "new-image.jpg";
}
</script>
</body>
</html>
Explanation:
- HTML Structure: An img element with an onclick attribute is added. The attribute calls the changeImage function when the image is clicked.
- JavaScript: The changeImage function changes the src attribute of the image element to “new-image.jpg”.
Using External JavaScript File
Using an external JavaScript file is a good practice for keeping HTML and JavaScript separate, making the code more maintainable.
Example 3: External JavaScript Change
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Image OnClick</title>
<script src="script.js" defer></script>
</head>
<body>
<img id="myImage" src="original-image.jpg" alt="My Image" width="200">
</body>
</html>
script.js:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("myImage").addEventListener("click", function() {
this.src = "new-image.jpg";
});
});
Explanation:
- HTML Structure: The img element is included without inline JavaScript. The script.js file is linked with the defer attribute to ensure it loads after the HTML.
- External JavaScript: The script.js file contains the event listener setup, which changes the src attribute of the image when it is clicked.
Conclusion
Changing the src attribute of an image in JavaScript can be done using various methods. The addEventListener method is preferred for its clean separation of HTML and JavaScript. Inline onclick attributes offer a quick solution but mix content and behavior. Using external JavaScript files is the best practice for larger projects. By understanding these methods, you can choose the most appropriate one for your needs and create interactive web pages efficiently.
