OnClick simple
Résolu
Dark_Angel_the_1
Messages postés
4
Statut
Membre
-
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 !!!
}
}
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:
- OnClick simple
- 14 simple - Guide
- Simple pdf - Télécharger - PDF
- Simple ocr - Télécharger - Bureautique
- Simple file locker - Télécharger - Sécurité
- Simple comic - Télécharger - Vie quotidienne
2 réponses
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é... )
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>