Bonjour,
Dans le code suivant, je veux afficher mon paragraphe classe "help" sur clic du point d'interrogation entre les deux balises strong. Je veux le masquer sur clic sur le paragraphe lui-même.
HTML:CSS:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 <form method="post" class="search"> <div><input type="search" id="q" name="q" /> <button name="qBtn"><img src="<?= DIR_IMAGES.'glass.png' ?>" /></button> <strong>?</strong></div> <div><label for="latest"><?= AFF_LBL_LATEST ?></label> <?= $lstLatest ?></div> <!-- La variable lstLatest contient la liste name='latest' complète --> <div><label for="favourites"><?= AFF_LBL_FAVOURITE ?></label> <?= $lstFavourites ?></div> <!-- La variable lstFavourites contient la liste name='favourite' complète --> </form> <p class="help">Texte d'aide</p>JavaScript:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 .help { color:#900; font-size:.9em; background-color:rgb(255, 247, 153); display:none; }La console affiche "<strong id="helpMark">?</strong>"
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 "use strict"; const headForm = document.querySelector('.search'), footForm = document.querySelector("#favourite"), favourite = document.querySelector("input[name='favourite']"), helpMark = headForm.querySelector("#helpMark"); alert(helpMark); console.log(helpMark); helpMark.addEventListener('clic', function(e) { alert('ccccc'); document.querySelector('.help').style.display = 'block'; }), false;
Partager