You are not logged in.

Computer Science in 1ère

The forum to cure all your computer anxieties

#1 24-Mar-2020 13:56:47

Pacôme Giraudeau
Member
Registered: 12-Sep-2019
Posts: 67

(Chap 6) grid interactive ?

Bonjour,
Alors voilà, je veux faire une grille où la couleur de la case change quand on clique dessus


Le html


<!doctype html>
<html lang="fr">

<head>
  <title>test</title>
  <meta charset="utf-8" />

</head>

<body>
  <h1>test</h1>
  <div id="grid">
    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
    <div id="item4"></div>
    <div id="item5"></div>
    <div id="item6"></div>
    <div id="item7"></div>
    <div id="item8"></div>
    <div id="item9"></div>
  </div>
  </body>
</html>

 

Le css

#grid {
  display: grid;
  grid-gap: 10px;
  grid-row-gap: 25px;
}
#item1 {
  background-color: white;
  grid-area: 1 / 1;
  width: 150px;
  height: 150px;
}
#item2 {
  background-color: white;
  grid-area: 1 / 2;
  width: 150px;
  height : 150px;
}
#item3 {
  background-color: white;
  grid-area: 1/3;
  width: 150px;
  height: 150px;
}

#item4 {
  background-color: white;
  grid-area: 2/1;
  width: 150px;
  height : 150px;
}

#item5 {
  background-color: red;
  grid-area: 2/2;
  width: 150px;
  height: 150px;
}

#item6 {
  background-color: white;
  grid-area: 2/3;
  width: 150px;
  height: 150px;
}

#item7 {
  background-color: white;
  grid-area: 3/1;
  width: 150px;
  height: 150px;
}
#item8 {
  background-color: white;
  grid-area: 3/2;
  width: 150px;
  height: 150px;
}
#item9 {
  background-color: white;
  grid-area: 3/3;
  width: 150px;
  height: 150px;
}

 


Mais quand j’utilise java pour faire « onmouseover... » pour changer la couleur du background mais ça ne marche pas

Ce que j’ai testé :

document.item1.onmouseover = function(){
document.item1.style.backgroundColor="red";};

Et

document.grid.onmouseover = function(){
document.grid.style.backgroundColor="red";};


 

Last edited by Pacôme Giraudeau (24-Mar-2020 13:57:07)

Offline

Board footer

Powered by FluxBB