If I were to create an image and give it the source of "box.png", using CSS or Javascript, how could I make a button change the source of the image to "package.png"?
Clicking the button changes the src attribute of the <img> element in the event listener.
let button = document.getElementById('toggleButton');
let logo = document.getElementById('logo');
let darkImageURL = "https://cdn-icons-png.flaticon.com/512/196/196685.png";
let lightImageURL = "https://cdn-icons-png.flaticon.com/512/169/169367.png";
button.addEventListener('click', function(event) {
if(this.innerHTML === "Dark") {
document.body.style.background = "black";
this.innerHTML = "Light";
logo.src = darkImageURL;
}
else {
document.body.style.background = "white";
this.innerHTML = "Dark";
logo.src = lightImageURL;
}
});<body>
<button id="toggleButton">Dark</button>
<img id="logo" class="nav_logo" src="https://cdn-icons-png.flaticon.com/512/169/169367.png" alt="original logo" width="100" height="100"/>
</body>