Afficher/masquer un élément sur clic

**moimp** · 22/04/2018, 21h21

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:

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>&nbsp;<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>

CSS:

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;
}

JavaScript:

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;

La console affiche "<strong id="helpMark">?</strong>"

**danielhagnoul** · 22/04/2018, 23h25

headForm.querySelector("#helpMark"); il n'y a pas d'élément ayant un ID 'helpMark' dans le formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
helpMark.addEventListener('click', function(e) {
  document.querySelector('.help').style.display = 'block';
}, false );

**moimp** · 23/04/2018, 12h09

Au temps pour moi. Je ne devais pas être bien clair lorsque j'ai posé ma question car le code n'est pas le même que dans mon fichier (mauvais copier/coller ?).
J'ai entièrement repris mon code est l'écouteur de la ligne 28 n'est toujours pas appelé. Voici mon nouveau code (le css n'a pas changé).

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" name="q" /> <button name="qBtn"><img src="<?= DIR_IMAGES.'glass.png' ?>" /></button> <button name="helpMark"><strong>&nbsp;?&nbsp;</strong></button></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>

Code javascrip :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// gestion des champs de recherche et des favoris
 
"use strict";
 
const	headForm	= document.querySelector('.search'),
		footForm	= document.querySelector('#favourite');
 
console.log(headForm.helpMark);
 
headForm.qBtn.addEventListener('clic', function(e) {			// OK mais alert ne fonctionne pas
	alert('qBtn');
	headForm.latest.value = '';
	headForm.favourites.value = '';
}), false;
 
headForm.latest.addEventListener('change', function(e) {		// OK mais ne met pas immédiatement à jour la liste des latest
	alert('latest');
	headForm.q.value = '';
	headForm.submit();
}), false;
 
headForm.favourites.addEventListener('change', function(e) {	// OK
	alert('favourite_s');
	headForm.q.value = '';
	headForm.submit();
}), false;
 
headForm.helpMark.addEventListener('clic', function(e) {		
	alert('helpMark');
	document.querySelector('.help').style.display = 'block';
}), false;
 
footForm.favourite.addEventListener('change', function(e) {		// OK
	alert('favourite');
	if (e.target.name === footForm.favourite.name) {
		footForm.flag.value = 'check';
		footForm.submit();
	}
}), false;

**Loralina** · 23/04/2018, 12h44

Bonjour,
La solution est dans le code donné ici.

**moimp** · 23/04/2018, 13h55

NON, le problème n'est pas là: D'abord, j'ai essayé sans succès et avec le nouveau code, la console de la ligne 8 me renvoie bien l'élément.

**Loralina** · 23/04/2018, 17h06

Si je reprends vos derniers codes, que j'applique la solution de danielhagnoul ("click" au lieu de "clic", et "false" dans les appels de fonctions) et que je remplace le php par du html de test, alors pour moi tous les événements se déclenchent :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<form method="post" class="search">
	<div><input type="search" name="q" /> <button name="qBtn"><img src="glass.png" /></button> <button name="helpMark"><strong>&nbsp;?&nbsp;</strong></button></div>
	<div><label for="latest">AFF_LBL_LATEST</label><select name="latest"><option>1</option><option>2</option></select></div>
	<div><label for="favourites">AFF_LBL_FAVOURITE</label><select name="favourites"><option>1</option><option>2</option></select></div>
</form>
<p class="help">Texte d'aide</p>
<script>
// gestion des champs de recherche et des favoris
 
"use strict";
 
const   headForm        = document.querySelector('.search'),
                footForm        = document.querySelector('#favourite');
 
console.log(headForm.helpMark);
 
headForm.qBtn.addEventListener('click', function(e) {                   // OK mais alert ne fonctionne pas
        alert('qBtn');
        headForm.latest.value = '';
        headForm.favourites.value = '';
}, false);
 
headForm.latest.addEventListener('change', function(e) {                // OK mais ne met pas immédiatement à jour la liste des latest
        alert('latest');
        headForm.q.value = '';
        headForm.submit();
}, false);
 
headForm.favourites.addEventListener('change', function(e) {    // OK
        alert('favourite_s');
        headForm.q.value = '';
        headForm.submit();
}, false);
 
headForm.helpMark.addEventListener('click', function(e) {               
        alert('helpMark');
        document.querySelector('.help').style.display = 'block';
}, false);
/*
footForm.favourite.addEventListener('change', function(e) {             // OK
        alert('favourite');
        if (e.target.name === footForm.favourite.name) {
                footForm.flag.value = 'check';
                footForm.submit();
        }
}, false);*/
</script>

J'ai mis en commentaire la fin dont il n'y a pas de html correspondant.
Précision : pour que les attributs "for" des labels correspondent aux listes, il faudrait rajouter aux listes des "id". Cela n'empêche pas de tester sans.

Attention également par rapport à ce commentaire "".
"favourite" est écrit au singulier, comment est-il écrit dans le code généré ?
En effet, dans le js, on a headForm.favourites, le mot est au pluriel.

la console de la ligne 8 me renvoie bien l'élément.

Oui, mais le problème est ailleurs : il est écrit "clic" au lieu de "click", comme l'a indiqué danielhagnoul dans sa correction.

**danielhagnoul** · 23/04/2018, 17h22

Réponse au message n° 3.

Je ne sais rien faire avec du code PHP, il faut copier-coller ici le code source de la page web (clic droit sur la page web puis clic dans le menu contextuel sur "Afficher le code source de la page").

Je vois que :

qBtn et helpMark sont des noms (name) ;
latest et favourites sont, à l'évidence, des ID.

Comme je n'ai pas ces codes, j'ai testé avec des inputs.

Vos codes JS sont presque bons, j'avais déjà attiré votre attention sur vos erreurs dans le message précédent.

Codes HTML et JS de mon test :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form method="post" class="search">
    <div>
        <input type="search" name="q" /> 
        <button name="qBtn">
            <img src="../images/boule4.png" />
        </button> 
        <button name="helpMark">
            <strong>&nbsp;?&nbsp;</strong>
        </button>
    </div>
    <div>
        <label for="latest">
                AFF_LBL_LATEST
        </label> 
        <input type="text" id="latest">
    </div> <!-- La variable lstLatest contient la liste name='latest' complète -->
    <div>
        <label for="favourites">
            AFF_LBL_FAVOURITE
        </label> 
        <input type="text" id="favourites">
    </div> <!-- La variable lstFavourites contient la liste name='favourite' complète -->
</form>
<p class="help">Texte d'aide</p>

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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
// gestion des champs de recherche et des favoris
 
const headForm = document.querySelector('.search');
 
console.log( headForm.helpMark );
 
headForm.qBtn.addEventListener('click', function(e) {
	alert('qBtn');
	headForm.latest.value = '';
	headForm.favourites.value = '';
}, false );
 
headForm.latest.addEventListener('change', function(e) {
	alert('latest');
	headForm.q.value = '';
	headForm.submit();
}, false );
 
headForm.favourites.addEventListener('change', function(e) {
	alert('favourite_s');
	headForm.q.value = '';
	headForm.submit();
}, false );
 
headForm.helpMark.addEventListener('click', function(e) {		
	alert('helpMark');
	document.querySelector('.help').style.display = 'block';
}, false );
 
    // fin code du test
 
}, { capture: false, passive: true, once: false } );

EDIT 2018-04-23 18:19

Je vous conseille :

l'usage de querySelector() et de querySelectorAll() car ils utilisent des sélecteurs CSS ;
de construire toutes les constantes nécessaires pour accéder aux éléments du DOM en début de code ;
si vous travaillez avec les navigateurs d'aujourd'hui (Chrome, Firefox et Edge) d'apprendre ES2015+

Pour le même code HTML, voici un code JS mieux construit et qui fonctionne correctement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const 
    elemSearch = document.querySelector( 'form.search' ),
    elemQBtn = elemSearch.querySelector( 'button[name="qBtn"]' ),
    elemHelpMark = elemSearch.querySelector( 'button[name="helpMark"]'),
    elemLatest = document.querySelector( '#latest' ),
    elemfavourites = document.querySelector( '#favourites' ),
    elemHelp = document.querySelector( 'p.help' );
 
elemQBtn.addEventListener( 'click', ev => {
    ev.stopPropagation();
    ev.preventDefault();
 
    console.log( ev.target );
},  { capture: false, passive: false, once: false } );
 
elemHelpMark.addEventListener( 'click', ev => {
    ev.stopPropagation();
    ev.preventDefault();
 
    console.log( ev.target );	
 
    elemHelp.style.color = 'blue';
    elemHelp.style[ 'background-color' ] = 'yellow';
},  { capture: false, passive: false, once: false } );
 
elemLatest.addEventListener( 'change', ev => {
    console.log( ev.target.value );
},  { capture: false, passive: true, once: false } );
 
elemfavourites.addEventListener( 'change', ev => {
    console.log( ev.target.value );
},  { capture: false, passive: true, once: false } );

**moimp** · 23/04/2018, 20h10

Mon problème n'est pas complètement résolu mais merci à vous deux. Quelques remarques sur vos réponses:

@Loralina:
L'erreur principale provient de la mauvaise orthographe (clic au lieu de click). J'aurais du m'en apercevoir tout seul.
J'ai bien un élément 'favourites' (liste select) au pluriel et un élément 'favourite' (checkbox) au singulier.

@danielhagnoul:
1) Pourquoi préférer l'utilisation d'une constante pour chaque élément plutôt que d'utiliser une cascade d'objets comme elemForm.inputName.addEventListener() ?
2) Quel est l'intérêt d'ajouter un preventDefault sur l'évènement?
3) Je ne connaissais pas l'objet options et j'ai commencé à me documenter. Je n'en comprends ni l'intérêt ni le fonctionnement. En particulier je ne comprends pas l'option passive ni pourquoi elle vaut tantôt false, tantôt true.

Le problème qui me reste:
Mon paragraphe p.help ne s'affiche jamais avec le css ligne 5 de #1.
Il s'affiche toujours et dès le chargement de la page si je mets cette ligne en commentaire et que j'ajoute le code suivant:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.addEventListener("load", function(e) {
	document.querySelector('.help').style.display = 'none';
}), false;

**danielhagnoul** · 23/04/2018, 22h33

Envoyé par moimp

[...]@danielhagnoul:
1) Pourquoi préférer l'utilisation d'une constante pour chaque élément plutôt que d'utiliser une cascade d'objets comme elemForm.inputName.addEventListener() ?
2) Quel est l'intérêt d'ajouter un preventDefault sur l'évènement?
3) Je ne connaissais pas l'objet options et j'ai commencé à me documenter. Je n'en comprends ni l'intérêt ni le fonctionnement. En particulier je ne comprends pas l'option passive ni pourquoi elle vaut tantôt false, tantôt true.

Le problème qui me reste: Mon paragraphe p.help ne s'affiche jamais avec le css ligne 5 de #1. [...]

1) Moins de choses à se souvenir, moins d'erreurs en tapant. Penser à un script d'une centaine de lignes.

2) Pouvoir réagir au clic sur les boutons, sinon le clic se propage et le formulaire est soumis (regarder les informations affichées dans la console).

3) Un script n'est plus 'passive: true' si on contrôle la propagation des événements.

4) Oops !

C'est de ma faute, j'ai oublié qu'il y avait du CSS sur la classe "help". Si on veut la modifier, il ne faut pas faire 'p.help' mais '.help'.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const 
    elemSearch = document.querySelector( 'form.search' ),
    elemQBtn = elemSearch.querySelector( 'button[name="qBtn"]' ),
    elemHelpMark = elemSearch.querySelector( 'button[name="helpMark"]'),
    elemLatest = document.querySelector( '#latest' ),
    elemfavourites = document.querySelector( '#favourites' ),
    elemHelp = document.querySelector( '.help' );
 
elemQBtn.addEventListener( 'click', ev => {
    ev.stopPropagation();
    ev.preventDefault();
 
    console.log( ev.target );
},  { capture: false, passive: false, once: false } );
 
elemHelpMark.addEventListener( 'click', ev => {
    ev.stopPropagation();
    ev.preventDefault();
 
    elemHelp.style.display = 'block';
    elemHelp.style.color = 'blue';
    elemHelp.style[ 'background-color' ] = 'yellow';
 
    console.log( elemHelp.style.display );
},  { capture: false, passive: false, once: false } );
 
elemLatest.addEventListener( 'change', ev => {
    console.log( ev.target.value );
},  { capture: false, passive: true, once: false } );
 
elemfavourites.addEventListener( 'change', ev => {
    console.log( ev.target.value );
},  { capture: false, passive: true, once: false } );

**Loralina** · 24/04/2018, 11h15

Bonjour,

Envoyé par moimp

Le problème qui me reste:
Mon paragraphe p.help ne s'affiche jamais avec le css ligne 5 de #1.
Il s'affiche toujours et dès le chargement de la page si je mets cette ligne en commentaire et que j'ajoute le code suivant:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.addEventListener("load", function(e) {
	document.querySelector('.help').style.display = 'none';
}), false;

Votre objectif serait de le cacher non pas au niveau de la classe, mais une fois la page chargée via un événement load ?
Si oui, ce code ne fonctionne pas car la fonction n'est sans doute pas appelée (à noter encore une fois que "false" est écrit en dehors de l'appel à la fonction, la parenthèse doit être placée après).
Voici en effet ce que je constate :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script>
document.addEventListener("load",function(ev_){console.log("document load");}); //pas d'affichage
document.onload=function(ev_){console.log("document onload");}; //pas d'affichage
document.addEventListener("DOMContentLoaded",function(ev_){console.log("document DOMContentLoaded");}); //document DOMContentLoaded
 
window.addEventListener("load",function(ev_){console.log("window load");}); //window load
window.onload=function(ev_){console.log("window onload");}; //window onload
window.addEventListener("DOMContentLoaded",function(ev_){console.log("window DOMContentLoaded");}); //window DOMContentLoaded
</script>

J'ai effectué quelques recherches, c'est assez flou :

https://developer.mozilla.org/fr/docs/Web/Events/load
Cibles indiquées : Document, Element

https://html.spec.whatwg.org/multipa...tml#event-load
Cibles indiquées : Window, Elements

http://help.dottoro.com/ljawbmqm.php
Apparemment, onload était utilisable sur document avec Opera < 10.5.

Voir également l'introduction ici :
https://developer.mozilla.org/fr/doc...MContentLoaded

Dans votre code, en remplaçant load par DOMContentLoaded et/ou document par window, la fonction devrait être appelée.

**moimp** · 24/04/2018, 11h28

@danielhagnoul
Un grand, un très grand merci malgré deux remarques mineures:
Le preventDefault() dans l'écouteur de qBtn empêche le fonctionnement parce que ce bouton est justement destiné à envoyer le formulaire de recherche.

1) Moins de choses à se souvenir, moins d'erreurs en tapant. Penser à un script d'une centaine de lignes.

Je préfère ma solution parce que j'ai justement moins de constantes à retenir et le rappel du formulaire conteneur permet de lieux se repérer. Question de goût personnel.

@Loralina
En gérant les événements correctement comme l'indique danielhagnoul, le problème est réglé.

Merci à vous deux. Problème résolu.

Afficher/masquer un élément sur clic

JavaScript

Discussions similaires

Partager

Partager