J'essaie de le faire lorsque ma souris passe au-dessus de mes boutons, cela changera la couleur en noir, puis lorsque la souris sera hors du bouton, elle reviendra aux mêmes couleurs qu'avant. Je veux que mon changement de couleur se fasse en javascript au lieu de CSS, simplement parce que j'essaie de comprendre les événements et les gestionnaires d'événements.

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;
}

0
Evan Munroe 15 avril 2020 à 17:49

2 réponses

Meilleure réponse

Si vous souhaitez utiliser JavaScript au lieu de CSS, vous devrez écrire des gestionnaires d'événements pour chaque bouton. Un gestionnaire d'événements se déclenchera lorsqu'une souris est sur le bouton ("mouseover"), l'autre gestionnaire d'événements se déclenchera quand une souris quitte le bouton ("mouseout").

Cette fonction ajoutera des gestionnaires d'événements à un seul bouton:

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';
  });
}

Un exemple pratique:

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>

Documentation sur les événements de souris et addEventListener ().

1
terrymorse 15 avril 2020 à 16:28

Disons que l'id du bouton est calcButton, vous feriez ceci:

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

Utilisez-le, mais changez les couleurs selon vos souhaits.

0
xbuzzzfarts152 15 avril 2020 à 14:53