redonner comportement CSS après click sur button radio

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.

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

Code:

---

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

---

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:

---

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

---

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

Code:

---

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

---

Code:

---

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 ?

Citation:

---

Envoyé par boteha

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

Citation:

---

Envoyé par boteha

Code:

---

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.

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.