JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<button id="button1" style="background-color:black;">11111111111</button>
<button id="button3" style="background-color: white;">22222222222</button>

JavaScript

let left = document.getElementById("button1");
let right = document.getElementById("button3");
 
[left, right].forEach(box => {
  box.addEventListener("mouseenter", changeColorOnHover);
});
 
function changeColorOnHover() {
  if (this.style.backgroundColor == "black"){
  	console.log(this.style.backgroundColor);
    this.style.backgroundColor = "gray";
	console.log(this.style.backgroundColor);
  }
 
  else if (this.style.backgroundColor == "white"){
  	console.log(this.style.backgroundColor);
    this.style.backgroundColor = "lightgray";
	console.log(this.style.backgroundColor);
  }
}