Why doesn't javascript mouseleave refresh original image when sliding between 2 images?

Question

Digging around and maybe I scanned right past it but I can't find a similar example of how to slide on and off between 2 images in javascript. In other words on hover displaying a 2nd image and them when leaving the hover returning the photo to the original photo. I have a sample setup here:

Notice I can get a standard mouseover/mouseleave scenario working on the top header but not for the 2 photos below in the codepen example:

Animation of what the problem is: https://i.stack.imgur.com/Xvkbd.gif

Example code: https://codepen.io/itplainedge/pen/OJEEaME

See alternative unwanted solution below this code:

HTML:

<h4 id="myH4" >Original Header</h4>

<div id="img1">
<img src="https://comic.browserling.com/bytes.png" alt=""/>
</div>

<div id="img2">
<img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" alt=""/>
</div>

JAVASCRIPT:

document.querySelector("#img1").addEventListener('mouseover',leftMouseOver);
document.querySelector("#img1").addEventListener('mouseleave',leftMouseLeave);
document.querySelector("#img2").addEventListener('mouseover',rightMouseOver);
document.querySelector("#img2").addEventListener('mouseleave',rightMouseLeave);


function leftMouseOver(e) {
  console.log("leftMouseOver");
  this.innerHTML='<img src="https://blog.codepen.io/wp-content/themes/codepen/images/codepen-logo-midgray.svg"></img>';  
}
function leftMouseLeave(e) {
  console.log("leftMouseLeave");
  this.innerHTML='<img src="https://comic.browserling.com/bytes.png" alt=""></img>';
}
function rightMouseOver(e) {
  console.log("rightMouseOver");
  this.innerHTML='<img src="https://blog.codepen.io/wp-content/themes/codepen/images/codepen-logo-midgray.svg"></img>';   
}
function rightMouseLeave(e) {
  console.log("rightMouseLeave");
  this.innerHTML='<img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" alt=""></img>';
}

document.querySelector("h4").style = "background-color: lightgreen; text-align:center;";
document.querySelector("h4").addEventListener('mouseover',mouseOver);
document.querySelector("h4").addEventListener('mouseleave',mouseUp);
document.querySelector("h4").addEventListener('mousedown',mouseDown);
document.querySelector("h4").addEventListener('mouseup',mouseUp);

function mouseOver(e) {
  this.innerHTML='Mouse Over';
}

function mouseDown(e) {
  this.innerHTML='Mouse Down';
}

function mouseUp(e) {
  this.innerHTML="Original Header";
}

Update: The following works using jQuery but I want to leave out the jquery requirement and use vanilla javascript https://codepen.io/itPPL/pen/LYrBNQY

Answer 1

Thanks @Yogi but I was trying to use pure Javascript without having access to the CSS file for this project.

There's always uncleanliness in my code and I tend to do things quite different until I play longer then it gets a little better. My problem is I was trying to change the whole innerHTML/outerHTML when all I needed to do was change the src attribute.

Here is my solution and like usual there might be better and I'll always take suggestions.

https://codepen.io/itPPL/pen/bGKjYbv

HTML:

<h4 id="myH4" >Original Header</h4>

<div id="img1">
<img src="https://comic.browserling.com/bytes.png" width="300" height="300"/>
</div>

<div id="img2">
<img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" width="300" height="300"/>
</div>

CSS:

#myH4 {font-size:26px;}
#img1{background-color:lightblue;}
#img2{background-color:lightgreen;}

Javascript:

//Header Functions:
function mouseOver(e) {
  this.innerHTML='Stop that tickles';
}

function mouseDown(e) {
  this.innerHTML='Haha';
}

function mouseUp(e) {
  this.innerHTML="Original Header";
}


//Image Functions:
function onHover()
{
document.querySelector("img[src='https://comic.browserling.com/bytes.png']").setAttribute("src","https://blog.codepen.io/wp-content/themes/codepen/images/codepen-logo-midgray.svg");
console.log("Hovering Left...");
}

function offHover()
{
document.querySelector("img[src='https://blog.codepen.io/wp-content/themes/codepen/images/codepen-logo-midgray.svg']").setAttribute("src","https://comic.browserling.com/bytes.png");
console.log("Out Left...");
}
function onHover2()
{
document.querySelector("img[src='https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg']").setAttribute("src","https://blog.codepen.io/wp-content/themes/codepen/images/codepen-logo-midgray.svg");  
console.log("Hovering Right...");
}
function offHover2()
{
document.querySelector("img[src='https://blog.codepen.io/wp-content/themes/codepen/images/codepen-logo-midgray.svg']").setAttribute("src","https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg");  
console.log("Out Right...");
}

//Play with header
document.querySelector("h4").style = "background-color: yellow; text-align:center; border: blue; border-width: medium; border-style: dotted; padding: 25px;";
document.querySelector("h4").addEventListener('mouseover',mouseOver);
document.querySelector("h4").addEventListener('mouseleave',mouseUp);
document.querySelector("h4").addEventListener('mousedown',mouseDown);
document.querySelector("h4").addEventListener('mouseup',mouseUp);

//Play with images
document.querySelector("img[src='https://comic.browserling.com/bytes.png']").addEventListener('mouseover',onHover);
document.querySelector("img[src='https://comic.browserling.com/bytes.png']").addEventListener('mouseleave',offHover);
document.querySelector("img[src='https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg']").addEventListener('mouseover',onHover2);
document.querySelector("img[src='https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg']").addEventListener('mouseleave',offHover2);