Comment dévoiler du texte avec "Onclick" + laisser un hover
Fermé
Flo_mdt
Messages postés
2
Date d'inscription
dimanche 27 février 2022
Statut
Membre
Dernière intervention
4 mars 2022
-
27 févr. 2022 à 13:56
Flo_mdt Messages postés 2 Date d'inscription dimanche 27 février 2022 Statut Membre Dernière intervention 4 mars 2022 - 4 mars 2022 à 12:39
Flo_mdt Messages postés 2 Date d'inscription dimanche 27 février 2022 Statut Membre Dernière intervention 4 mars 2022 - 4 mars 2022 à 12:39
A voir également:
- Javascript afficher texte onclick
- Excel cellule couleur si condition texte - Guide
- Telecharger javascript - Télécharger - Langages
- Transcription audio en texte word gratuit - Guide
- Afficher mot de passe wifi android - Guide
- Mettre un texte en majuscule - Guide
2 réponses
Salut,
Plusieurs erreurs dans votre programme, euh vous avez regardé dans la console du navigateur pour les corriger? ça serait un bon début et la base de tout développement: corriger les erreurs du programme donc avant tout afficher les erreurs éventuelles.
Aussi si vous débutez vous feriez mieux de vous référer à la documentation des fonctions/méthodes que vous utilisez(une méthode est une fonction interne à un objet, la plupart sont des émthodes donc en JavaScript car basé sur le DOM qui signifie bien ce qu'il veut dire: Document Object Model- en français "modèle objet du document")
Laissez tomber le onclick qui est mal utilisé dans votre code et passer à la méthode addEventListener qui est nettement mieux sur de nombreux aspects.
En effet dans votre code vous utilisez 2 fois l'écouteur du click pour le même élément ce qui forcément ne peut pas fonctionner:
Dans l'attribut de balise(c'est sale comme manière d'écrire car oblige à mélanger HTML et JS et les rendent donc interdépendants d'où l'un des intérêts-écrire un code clair propre et réutilisable- de passer à addEventListener) par l'attribut onclick:
Le code suivant signifie
Active la détection s'il y a un click(c'est pour cela qu'on parle d'écouteur) sur l'élément pour effectuer la fonction maFonction()
Et dans la fonction active() que vous utilisez dans l'attribut onclick:
Donc le premier clic est détecté et active l'écouteur pour b1(et les éléments suivants b2 et b3).
C'est comme si vous écriviez ceci qui n'a pas vraiment de sens non plus:
Un attribut ne peut avoir qu'une valeur et si il est définit plusieurs fois seul le dernier qui a parlé sera pris en compte car réecrit la valeur sur la précédente.
correction: soit vous imbriquez les fonctions pour n'en avoir qu'une dans l'attribut onclick (ou vous pouvez les mettre à la suite mais bon c'est pas génial et facile de faire des erreurs) ou alors vous les imbriquez directement dans le corps de la fonction qui sea utilisée par addEventlistener
ELEMENT.style.background correspond à la propriété CSS background qui est un raccourci qui regroupe 3 propriétés hors vous n,'en indiquez qu'une.
https://www.w3schools.com/jsref/prop_style_background.asp
correction:
Si vous voulez changer la propriété background-color(CSS accessible via ELEMENT.style ) il faut écrire :
correction:
La meilleure façon est de passer par une ID qui est unique et donc ne renvoi qu'une valeur avec getElementById sinon si vous restez avec getElementsByClassName (remarquez le 's' avec le sélecteur par nom de classe qui n'existe pas avec le sélecteur d'id).
Mais bien sûr en utilisant un sélecteur par le nom de classes de balise vous rendez le code moins compréhensible et multipliez les risques d'erreurs:
quand on voit une ID utilisée on sait que c'est forcément un élément et que cela ne peut être qu'n seul et bien précis tandis qu'un sélecteur de classe sélectionne de 1 à plusieurs éléments et que rien ne garantit qu'il peut en y avoir plus d'un donc en plus de rendre ça confus il suffit qu'il y ait la réutilisation d'une classe(puisque qu'une classe CSS sert à être utilisée 1 ou plusieurs fois, en gén,éral plusieurs sinon autant passer par ID côté HTML et CSS).
Une solution plus efficace est d'utiliser l'élément 'écouté' directement. Cela peut se faire avec les propriétés de l'événement(event) qui contient(l'objet event bien sûr) l'élément qui est cliqué via .target:
Documentation de la méthode addEventListener (le premier lien de la doc est celui du consortium Web-ceux qui font les lois et normes du web et le lien suivant celui d'un des contributeurs importants de JavaScript: la foncdation Mozilla)
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
En optimisé:
<a href="#" >
</a>
D'une manière générale si vous écrivez plusieurs fois le même code pour différentes choses c'est que vous n'avez pas compris la programmation et que vous faites mal les choses parce que l'informatique c'est fait pour se simplifier la vie en automatisant des processus.
b1.onclick = function... fais ceci
b2.onclick =function... fais la même chose
...
en plus de devenir pénible et ingérable (et au passage rallonger le temps de traitement et vote temps de travail)si vous devez ajouter une dizaine ou une centaine de boutons ou simplement changer ce que fait le clic c'est totalement contre-productif puisque qu'il est nettement meilleur (à tous points de vue) d'écrire :
function ceQuiDoitSefaire(){
...instructions à faire
}
b1.onclick= ceQuiDoitSefaire()
b2.onclick= ceQuiDoitSefaire()
etc...
Et permet pouvoir réutiliser simplement la même chose dans une autre page du site.
Plusieurs erreurs dans votre programme, euh vous avez regardé dans la console du navigateur pour les corriger? ça serait un bon début et la base de tout développement: corriger les erreurs du programme donc avant tout afficher les erreurs éventuelles.
Aussi si vous débutez vous feriez mieux de vous référer à la documentation des fonctions/méthodes que vous utilisez(une méthode est une fonction interne à un objet, la plupart sont des émthodes donc en JavaScript car basé sur le DOM qui signifie bien ce qu'il veut dire: Document Object Model- en français "modèle objet du document")
Laissez tomber le onclick qui est mal utilisé dans votre code et passer à la méthode addEventListener qui est nettement mieux sur de nombreux aspects.
En effet dans votre code vous utilisez 2 fois l'écouteur du click pour le même élément ce qui forcément ne peut pas fonctionner:
Dans l'attribut de balise(c'est sale comme manière d'écrire car oblige à mélanger HTML et JS et les rendent donc interdépendants d'où l'un des intérêts-écrire un code clair propre et réutilisable- de passer à addEventListener) par l'attribut onclick:
Le code suivant signifie
<a href="#" onclick="maFonction()">un boutton</a>
Active la détection s'il y a un click(c'est pour cela qu'on parle d'écouteur) sur l'élément pour effectuer la fonction maFonction()
Et dans la fonction active() que vous utilisez dans l'attribut onclick:
b1.onclick = function(){
b1.style.background = "black";
b2.style.background = "";
b3.style.background = "";
}
Donc le premier clic est détecté et active l'écouteur pour b1(et les éléments suivants b2 et b3).
- erreur conceptuelle: Activer la détection n'a donc lieu qu'une fois la fonction "active()" utilisé donc lors d'un clic sur l'un des 3 éléments/boutons. Ce qui forcément pose des soucis.
- erreur d'attribution: Autre chose vous écrivez 2 fois l'attribut onclick pour le même attribut il prendra probablement la dernière valeur indiquée donc n'effectuera que la fonction qui lui est passée en dernier(remplaçant la valeur précédente).
C'est comme si vous écriviez ceci qui n'a pas vraiment de sens non plus:
<button id="monIdentifiantBidon" id="monIdentifiantVrai">cliquer</button>
Un attribut ne peut avoir qu'une valeur et si il est définit plusieurs fois seul le dernier qui a parlé sera pris en compte car réecrit la valeur sur la précédente.
correction: soit vous imbriquez les fonctions pour n'en avoir qu'une dans l'attribut onclick (ou vous pouvez les mettre à la suite mais bon c'est pas génial et facile de faire des erreurs) ou alors vous les imbriquez directement dans le corps de la fonction qui sea utilisée par addEventlistener
- erreur de syntaxe: Ensuite l'instruction que vous indiquez est fausse:
ELEMENT.style.background correspond à la propriété CSS background qui est un raccourci qui regroupe 3 propriétés hors vous n,'en indiquez qu'une.
https://www.w3schools.com/jsref/prop_style_background.asp
correction:
Si vous voulez changer la propriété background-color(CSS accessible via ELEMENT.style ) il faut écrire :
b1.style.backgroundColor ="black"
- erreur de syntaxe 2: la méthode getElementByClassName renvoi un tableau de valeurs et non une valeur unique. Un tableau est une "variable" qui contient une à plusieurs valeurs, c'est une liste consécutive et pour y accéder vous devez passer par la notation entre crochets qui indique un index numérique de ces valeurs(qui commence à zéro):
var unTableauDeValeurs =["pomme", "poire", "orange"]
//--afficher la console c'est du navigateur la base!
console.log('la première valeur du tableau est: '+unTableauDeValeurs[0]+', la dernière valeur du tableau est: '+unTableauDeValeurs)
De même pour un tableau qui ne contient qu'une valeur:
var unTableau=[document.getElementByClassName]
alert('la première valeur est : 'unTableau[0]+'la deuxième valeur est: '+unTableau[1])
correction:
La meilleure façon est de passer par une ID qui est unique et donc ne renvoi qu'une valeur avec getElementById sinon si vous restez avec getElementsByClassName (remarquez le 's' avec le sélecteur par nom de classe qui n'existe pas avec le sélecteur d'id).
Mais bien sûr en utilisant un sélecteur par le nom de classes de balise vous rendez le code moins compréhensible et multipliez les risques d'erreurs:
quand on voit une ID utilisée on sait que c'est forcément un élément et que cela ne peut être qu'n seul et bien précis tandis qu'un sélecteur de classe sélectionne de 1 à plusieurs éléments et que rien ne garantit qu'il peut en y avoir plus d'un donc en plus de rendre ça confus il suffit qu'il y ait la réutilisation d'une classe(puisque qu'une classe CSS sert à être utilisée 1 ou plusieurs fois, en gén,éral plusieurs sinon autant passer par ID côté HTML et CSS).
Une solution plus efficace est d'utiliser l'élément 'écouté' directement. Cela peut se faire avec les propriétés de l'événement(event) qui contient(l'objet event bien sûr) l'élément qui est cliqué via .target:
function illuminerBoutton(monBouton){
monbouton.style.backgroundColor="black"
}
function activeOuDesactive(evenement){
//-- l'événement est passé en argument de la fonction
//-- evenement.target correspond à l'élément qui est cliqué
if (evenement.target.display === "block"){
evenement.target.display=""
}else{
evenement.target.display === "block"
}
illumineBouton (evenement.target)
}
document.getElementById("bt1").addEventListener("click", function(e){
activeOuDesactive(e)
})
Documentation de la méthode addEventListener (le premier lien de la doc est celui du consortium Web-ceux qui font les lois et normes du web et le lien suivant celui d'un des contributeurs importants de JavaScript: la foncdation Mozilla)
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
En optimisé:
<a href="#" >
</a>
D'une manière générale si vous écrivez plusieurs fois le même code pour différentes choses c'est que vous n'avez pas compris la programmation et que vous faites mal les choses parce que l'informatique c'est fait pour se simplifier la vie en automatisant des processus.
b1.onclick = function... fais ceci
b2.onclick =function... fais la même chose
...
en plus de devenir pénible et ingérable (et au passage rallonger le temps de traitement et vote temps de travail)si vous devez ajouter une dizaine ou une centaine de boutons ou simplement changer ce que fait le clic c'est totalement contre-productif puisque qu'il est nettement meilleur (à tous points de vue) d'écrire :
function ceQuiDoitSefaire(){
...instructions à faire
}
b1.onclick= ceQuiDoitSefaire()
b2.onclick= ceQuiDoitSefaire()
etc...
Et permet pouvoir réutiliser simplement la même chose dans une autre page du site.
Flo_mdt
Messages postés
2
Date d'inscription
dimanche 27 février 2022
Statut
Membre
Dernière intervention
4 mars 2022
4 mars 2022 à 12:39
4 mars 2022 à 12:39
Salut ! Merci beaucoup pour ta réponse
J'ai bien tout compris et c'est vrai que grâce à ton explications j'ai vu que j'avais mal utilisé le 'onclick'. Je n'avais pas non plus pensé à la méthode du addEventListener qui va me servir non seulement pour ce code mais aussi pour mes autres projet étant donné sa grande et large utilité. Du coup après quelque arrangement le code marche très bien et mon projet peux continuer.
Merci beaucoup encore une fois !
J'ai bien tout compris et c'est vrai que grâce à ton explications j'ai vu que j'avais mal utilisé le 'onclick'. Je n'avais pas non plus pensé à la méthode du addEventListener qui va me servir non seulement pour ce code mais aussi pour mes autres projet étant donné sa grande et large utilité. Du coup après quelque arrangement le code marche très bien et mon projet peux continuer.
Merci beaucoup encore une fois !