Discussion :

[boteha]

Bonjour,

Un peu difficile à expliquer, j'ai un codepen

Le survol du lien "texte libre" affiche un micro-formulaire dans p#texte.
Si le pointeur quitte p#texte le bloc disparait
C'est fait en CSS.

Le javascript fait que si le deuxième choix du formulaire est coché p#texte reste toujours en display clock

Ce que je n'arrive pas à faire.
Si le premier choix du formulaire est re-coché, on revient au comportement CSS initial, c'est à dire que p#texte disparait quand ni lui ni "texte libre" n'est survolé par le pointeur.

Pour résumer :
Deuxième coché : display: block
Retour premier choix qui est choix par défaut : on reste en display block mais on passe en display none quand le pointer ne survole plus "texte libre" ou p#texte.

Merci d'avance pour votre aide.

[mathieu]

pour faire ça, vous devez aussi écouter les modifications de l'autre bouton radio pour changer d'état quand il est sélectionné :

Code javascript :

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

1
2
3
4
5
6
7
8
9
const nose = document.getElementById('nose');
nose.addEventListener('change', e => {
	nose["parentNode"]["style"]["display"] = "";
});
 
const netf = document.getElementById('netf');
netf.addEventListener('change', e => {
	netf["parentNode"]["style"]["display"] = "block";
});

[boteha]

Bonjour mathieu,

Cela marche nickel, j'ai mis le codepen à jour.

MERCI.

J'ignorais que l'on peut par JS affecter une valeur vide ("") au display, sachant que cette valeur n'existe pas en CSS.

Avant de cocher résolu, deux questions sans grande importance :

Code :

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

nose["parentNode"]["style"]["display"] = ""

Pourquoi utilises-tu des guillemets doubles alors que les simples suffisent ?

Code :

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

nose['parentNode']['style']['display'] = ''

Code :

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

p#texte {display: inline-block; border: 1px solid green}

Pourquoi ce bloc occupe-t-il toute la largeur du parent ?
Sauf erreur avec inline-block la largeur est déterminée par le contenu, non ?

[mathieu]

Pourquoi utilises-tu des guillemets doubles alors que les simples suffisent ?

c'est juste une question d'esthétique et d'habitude.
en javascript il y a aussi le caractère ` qui permet d'utiliser des variables à l'intérieur :
https://developer.mozilla.org/fr/doc...plate_literals

Code :

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

p#texte {display: inline-block; border: 1px solid green}

Pourquoi ce bloc occupe-t-il toute la largeur du parent ?
Sauf erreur avec inline-block la largeur est déterminée par le contenu, non ?

c'est plutot question de css donc il vaut mieux créer une nouvelle discussion.

[boteha]

Merci pour tes précisions.

En JS, le guillemet double est-il exactement équivalent au guillemet simple ?

En PHP que je connais mieux il y a une différence :
" va chercher les variables éventuelles (comme ` en JS si j'ai compris).
' ne va rien chercher et type le contenu comme une string
C'est plus propre et du gagnes un milliardième de seconde à ne pas utiliser " à la place de '.

Pour le display:inline-block je me demande si ce n'est pas un bug du codepen.