Programmatically change the src of an img tag

Listen to your events

A better approach than directly attaching onclick attributes in HTML is to employ event listeners in JavaScript, as it offers more flexibility and control:

// Wait... isn't JavaScript single-threaded?
// Yes, but it can still throw a great party for event listeners at runtime
document.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById('imageID').addEventListener('click', function() {
        this.src = 'anotherImage.jpg'; // Huzzah! The image changes upon click
    });
});


This method also mitigates problems like event propagation, which may mistakenly require multiple clicks to activate the function.

Verify image file paths

Ensure that you specify accurate image file paths so that you don't end up playing hide and seek with your images!

document.getElementById('imageID').src = './path/to/newImage.jpg';
// The dot (.) is like your home base — it points to the current directory


Enhance your code with jQuery

If you're a jQuery fan (and have it properly installed), use its clean syntax to reduce your lines of code:

$('#imageID').attr('src', 'newImage.jpg'); // Aha! Just one line in jQuery


Bulk update images

If you need to update multiple images at once, use .getElementsByClassName or .querySelectorAll:

let allImages = document.getElementsByClassName('image-class');
// Because who doesn't like a flashy gallery revamp?
Array.from(allImages).forEach(img => img.src = 'newImage.jpg');


Tidying up your code

Avoid using inline JavaScript, like onclick triggers. A big win for aesthetics, maintainability, and debugging. Also, always ensure that you don't accidentally add duplicate event listeners — because twice doesn't always mean nice in JavaScript!

Cross-browser compatibility

Perform thorough testing across a range of browsers for consistent functionality. You'll want your cool image swapping feature to work everywhere, not just in your favourite browser.

Handle event propagation

Understanding event propagation will save you from nightmares of unintended side effects. Proper use of event.stopPropagation() and event.preventDefault() will keep your sanity intact.