Sujet Précédent Sujet Suivant

OnClick simple

Résolu/Fermé
Dark_Angel_the_1 Messages postés 3 Date d'inscription jeudi 23 décembre 2021 Statut Membre Dernière intervention 29 décembre 2021 - 23 déc. 2021 à 19:18
Dark_Angel_the_1 Messages postés 3 Date d'inscription jeudi 23 décembre 2021 Statut Membre Dernière intervention 29 décembre 2021 - 24 déc. 2021 à 17:53
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
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38398 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 janvier 2025 4 732
23 déc. 2021 à 22:24
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
Réponse 2 / 2
Dark_Angel_the_1 Messages postés 3 Date d'inscription jeudi 23 décembre 2021 Statut Membre Dernière intervention 29 décembre 2021
24 déc. 2021 à 17:53
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

Discussions similaires

nom de metier
E=MC² -
Raymond PENTIER -

2 réponses