Как заставить кнопки менять цвета, используя только JavaScript?

Question

Я пытаюсь сделать это, когда моя мышь наводит курсор на мои кнопки, она меняет цвет на черный, а затем, когда мышь выключается, она снова изменит цвет на те же, что и раньше. Я хочу, чтобы мое изменение цвета было выполнено в javascript вместо CSS только потому, что я пытаюсь понять события и обработчики событий.

JS:

//Changing colors of operation colors 

//Multiply Color
const colorMultiply = document.getElementById('multiply')
colorMultiply.style.backgroundColor = "green" //Makes Color Green

//Divide Color
const colorDivide = document.getElementById('divide')
colorDivide.style.backgroundColor = "red"//Makes Color Red

//subtract color
const colorSubtract = document.getElementById('subtract')
colorSubtract.style.backgroundColor="blue"//Makes Color Blue

//add color
const colorAdd = document.getElementById('add')
colorAdd.style.backgroundColor="yellow"//Makes Color Yellow


//change font of numbers to blue (I did it like this incase anyone wants to color of a single number)
//Makes it easier for you to change a colour of one button
const number1 = document.getElementById('number1')
number1.style.color="blue"
const number2 = document.getElementById('number2')
number2.style.color="blue"
const number3 = document.getElementById('number3')
number3.style.color="blue"
const number4 = document.getElementById('number4')
number4.style.color="blue"
const number5 = document.getElementById('number5')
number5.style.color="blue"
const number6 = document.getElementById('number6')
number6.style.color="blue"
const number7 = document.getElementById('number7')
number7.style.color="blue"
const number8 = document.getElementById('number8')
number8.style.color="blue"
const number9 = document.getElementById('number9')
number9.style.color="blue"
const number0 = document.getElementById('number0')
number0.style.color="blue"
const decimal = document.getElementById('decimal')
decimal.style.color="blue"

//Changing color of the clear button
const clear = document.getElementById('clear')
clear.style.color="white"
clear.style.backgroundColor="black"

///////////////////////////////////////////////////////////////////////////////////////////////////////
// Then we want to insert `memoryStoreButton` before the `clear` button:
var memoryStoreButton = document.createElement("BUTTON");
memoryStoreButton.innerHTML = "MS";
clear.before(memoryStoreButton); //puts button before clear

// Then we want the `memoryClearButton` before `memoryStoreButton`
var memoryClearButton = document.createElement("BUTTON");
memoryClearButton.innerHTML = "MC";
memoryStoreButton.before(memoryClearButton);//puts button before clear

// and finally, the `memoryRestoreButton` before `memoryClearButton`
var memoryRestoreButton = document.createElement("BUTTON");
memoryRestoreButton.innerHTML = "MR";
memoryClearButton.before(memoryRestoreButton);//puts button before clear

///////////////////////////////////////////////////////////////////////////////////////////////////////////
//What number buttons are pressed
var numButton = document.querySelectorAll(".btn8");
var showNum = document.querySelector(".screen8");


numButton.forEach(function(button){
  button.addEventListener('click', function(event){
    if(event.target.innerHTML == "C"){
      return showNum.value = "";
    } else if (event.target.innerHTML == "=") {
      return;
    }
    let view = event.target.dataset.num;
    showNum.value += view;
  });
});

///////////////////////////////////////////////////////////////////////////////////////////////////////////
//When equal is pressed it calculates the numbers, and if no numbers were entered there will be a error mesage
var equalButton = document.querySelector("#equals")
equalButton.addEventListener('click', function(event){
  if(showNum.value == ""){
    return alert("Please Enter a Value"); // If no numbers are being displayed, error alert.
  }
  showNum.value = showNum.value + "=" + eval(showNum.value);
});

//Align test to the right of screen
document.getElementById("numberBox").style.textAlign = "right";
////////////////////////////////////////////////////////////////////////////////////////////////////////////

document.getElementsByTagName("BUTTON").addEventListener("mouseover", mouseOver);
document.getElementsByTagName("BUTTON").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementsByTagName("BUTTON").style.color = "black";
}

function mouseOut() {
  document.getElementsByTagName("BUTTON").style.color = "grey";
}

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">

<title> Calculator 8 </title>
 <script src="fp.js" defer></script>
 <link rel="stylesheet" href="fp.css">



</head>

<body>
 <section class="calculator8">
    <h1> Calculator 8 </h1>
  <form>
   <input type="text" name="calcScreeng" id="numberBox" class="screen8">
  </form>
  <div class="buttons8"> 
   <!-- operation buttons -->
   <button id="multiply" type="button" class="btn8 btn-mul" data-num="*">*</button>
   <button id="divide" type="button" class="btn8 btn-div" data-num="/">/</button>
   <button id="subtract" type="button" class="btn8 btn-sub" data-num="-">-</button>
   <button id="add" type="button" class="btn8 btn-add" data-num="+">+</button>
   <!-- number buttons -->
   <button id="decimal" type="button" class="btn8 btn-grey" data-num=".">.</button>
   <button id="number9" type="button" class="btn8 btn-grey" data-num="9">9</button>
   <button id="number8" type="button" class="btn8 btn-grey" data-num="8">8</button>
   <button id="number7" type="button" class="btn8 btn-grey" data-num="7">7</button>
   <button id="number6" type="button" class="btn8 btn-grey" data-num="6">6</button>
   <button id="number5" type="button" class="btn8 btn-grey" data-num="5">5</button>
   <button id="number4" type="button" class="btn8 btn-grey" data-num="4">4</button>
   <button id="number3" type="button" class="btn8 btn-grey" data-num="3">3</button>
   <button id="number2" type="button" class="btn8 btn-grey" data-num="2">2</button>
   <button id="number1" type="button" class="btn8 btn-grey" data-num="1">1</button>
   <button id="number0" type="button" class="btn8 btn-grey" data-num="0">0</button>
   <button id="equals" type="button" class="btn8 btn-grey">=</button>
   <button id="clear" type="button" class="btn8 btn-grey">C</button>


  </div>



 </section>


</body>

</html>

CSS:

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body{
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;

}

.calculator8{
 flex: 0 0 40%;
}
.screen8{
 width: 100%;
 font-size: 5rem;
 padding: 0.5rem;
 background: rgb(41,41,56);
 color: white;
 border:none;
}

.buttons8{
 display: flex;
 flex-wrap: wrap;
 transition: all 0.5s linear;
}

button{
 flex:0 0 25%;
 border: 1px solid black;
 padding: 0.25rem 0;
 transition: all 2s ease;
}

.btn-kground: rgb(224,224,224);
}

.btn8{
 font-size: 4rem;
}

Answer 1

Если вы хотите использовать JavaScript вместо CSS, вам нужно написать обработчики событий для каждой кнопки. Один обработчик событий будет срабатывать, когда мышь находится над кнопкой ('mouseover'), другой обработчик событий будет срабатывать, когда мышь покидает кнопку ('mouseout').

Эта функция добавит обработчики событий к одна кнопка:

function addButtonHandlers(btn) {

  // make gray button on mouseover
  btn.addEventListener('mouseover', () => {
    btn.style.backgroundColor = 'gray';
    btn.style.color = 'white';
  });

  // make white button on mouseout
  btn.addEventListener('mouseout', () => {
    btn.style.backgroundColor = 'white';
    btn.style.color = 'black';
  });
}

Рабочий пример:

function addButtonHandlers(btn) {

  // make gray button on mouseover
  btn.addEventListener('mouseover', () => {
    btn.style.backgroundColor = 'gray';
    btn.style.color = 'white';
  });
  
  // make white buton on mouseout
  btn.addEventListener('mouseout', () => {
    btn.style.backgroundColor = 'white';
    btn.style.color = 'black';
  });
}

const testBtn = document.getElementById('testbtn');
addButtonHandlers(testBtn);

button {
  margin: 1rem;
  padding: 1rem;
  border: none;
  color: black;
  background-color: white;
}

<button id='testbtn'>Test Button</button>

Документация по событиям мыши и addEventListener () .

Answer 2

Допустим, идентификатор кнопки - calcButton, вы должны сделать это:

<html>
<body>
<button id = "calcButton"></button>
<style>
#calcButton {
    color: red;
}
#calcButton:hover {
    color: black;
}
</style>
</body>
</html>

Используйте это, но измените цвета на те, которые вы хотите.