OnClick simple

Résolu
Dark_Angel_the_1 Messages postés 4 Statut Membre -  
Dark_Angel_the_1 Messages postés 4 Statut Membre -
Bonjour,

Je dois réaliser un petit test :

Créer une div qui prenne toute la hauteur de la page, pas toute la largeur et qui soit centrée.
Ajouter un background-color de votre choix.

- Lorsqu'on clique une première fois sur la div : un h1 apparait dans la div.
- Au deuxième clique le background-color change.
- Au troisième clique mettre une bordure sur la div.
- Revenir à zéro à partir du 4ème clique.

Voila ce que j'ai fait :

Mon html :

<body>
<div id="div" onClick="Mydiv()"><a href="#">Touch here</a></div>
<h1>Titre</h1>
<script src="Script.js"></script>
</body>

Mon css :

h1{
display: none;
}

Mon JS :

var Nv = document.getElementById('div');

var property = document.getElementById('div');

function Mydiv(){
switch (Nv) {
case 1:
document.getElementByTagName('h1') = display = "flex";
break;
case 2:
property.style.backgroundColor = "#0000ff";
break;
case 3:
document.getElementById('div') = ;
break;
case 4:
document.getElementByTagName('h1') = display = "none";
(property.style.backgroundColor = "#0000ff") = false;
document.getElementById('div') = ;
break;
default:
//rien du tout !!!
}
}

Configuration: Windows / Chrome 96.0.4664.110

2 réponses

  1.
    jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Bonjour,

    Déjà, merci d'utiliser les balises de code pour poster ton code sur le forum.
    Explications ( à lire entièrement ! ) disponibles ici :
    https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

    Ensuite.. regarde cet exemple (tu y étais presque.. c'est juste ta variable Nv qui ne correspond à rien en réalité... ) 
        
    <button onclick="jaiclique();">Teste</button>
    
  <script type="text/javascript">
 
    var nbClick = 0;
    
    function jaiclique(){
      nbClick++; //on incrémente le nombre de clics ..
      alert(nbClick);//juste pour que tu voies à combien tu en es...
      switch(nbClick){
        case 1:
          //...

          break;
        case 2:
          //...
          break;
        case 3:
          //...
          
          //on remet le compteur à zéro
          nbClick = 0;
          break;
      }
    
    }
 
  </script>

    0
  2. Dark_Angel_the_1 Messages postés 4 Statut Membre
     
    haaa merci beaucoup, pour être honnête je pensais vraiment pas avoir de réponses.
    Tu me retire une jolie épine du pied !
    Muchos gracias
    0