11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] GetAttribute et attribut hidden

Bonjour.

Tout d’abord, sachez que je suis un novice total en JS. Il faut donc me parler doucement… Smiley cligne

Voilà, j’ai un problème avec [-getAttribute-]. Si j’ai bien compris cette fonction, elle récupère la valeur de l’attribut demandé (par exemple : [-getAttribute('class')-] remonte la/les classes de l’élément). Le problème est pour les attributs booléens écrit "à la mode HTML5" c'est à dire sans valeur écrite. Dans mon cas l’attribut [-hidden-]. Dans ce cas, [-getAttribute-] ne semble pas récupérer la valeur au premier coup ! Si vous allez voir cette page codePen : http://codepen.io/Ogham/pen/eZbXxw et surveillez la console, vous verrez le problème. Les 2 lignes sont sensées afficher des popins, mais la première avec juste [-hidden-] ne fonctionne pas au premier clique (mais fonctionne bien après) alors qu’avec la seconde ligne en [-hidden = "hidden"-] cela fonctionne bien tout de suite. La console montre la valeur récupérée par getAttribute…

Du coup, il y a-t-il un truc pour que getAttribute fonctionne avec [-hidden-] ?

Merci.
Modifié par Derwoed (06 May 2016 - 10:29)
Bonjour !

Pourquoi ne pas modifier le HTML pour qu'il pose moins de problèmes ?

Ça me parait plus simple...

Smiley smile
Certes, mais contourner un problème n’est pas le résoudre ! Smiley biggrin

Ce serait un peu comme soigner les symptômes d’une maladie sans soigner cette maladie.

Et puis, cette solution fonctionne tant que je travaille seul, mais si je suis dans une équipe (ce qui est en fait presque toujours le cas) et qu’un autre dev écrit juste [-hidden-] (ce qui serait normal) il créera un bug…

Et puis… j’ai du mal à imaginer qu’il n’y ait pas de solution entre 2 langages (JS et HTML) sensés communiquer sans problème… (mais là, j’ai peut-être la naïveté du novice…)
Modifié par Derwoed (06 May 2016 - 12:40)
Derwoed a écrit :
Bonjour.

Tout d’abord, sachez que je suis un novice total en JS. Il faut donc me parler doucement… Smiley cligne

Voilà, j’ai un problème avec [-getAttribute-]. Si j’ai bien compris cette fonction, elle récupère la valeur de l’attribut demandé (par exemple : [-getAttribute('class')-] remonte la/les classes de l’élément). Le problème est pour les attributs booléens écrit "à la mode HTML5" c'est à dire sans valeur écrite. Dans mon cas l’attribut [-hidden-]. Dans ce cas, [-getAttribute-] ne semble pas récupérer la valeur au premier coup ! Si vous allez voir cette page codePen : http://codepen.io/Ogham/pen/eZbXxw et surveillez la console, vous verrez le problème. Les 2 lignes sont sensées afficher des popins, mais la première avec juste [-hidden-] ne fonctionne pas au premier clique (mais fonctionne bien après) alors qu’avec la seconde ligne en [-hidden = "hidden"-] cela fonctionne bien tout de suite. La console montre la valeur récupérée par getAttribute…

Du coup, il y a-t-il un truc pour que getAttribute fonctionne avec [-hidden-] ?

Merci.

Dans un de mes récents devs j'ai utilisé hasAttribute pour tester la présence avant de récupérer la valeur.
A priori ceci devrait suffire à ton besoin puisque la valeur importe peu en soi.
Salut,

En fait getAttribute récupère bien la valeur dans les 2 cas, dans un cas cette valeur est vide et dans l'autre elle vaut "hidden".
Si tu veux tester si une balise contient un attribut (avec ou sans valeur), il faut tester si sa valeur est "null".
Dans ton cas, il faut que tu testes ça :
if (oHidden != null) {
    oSrc.hidden = false;
}
else {
    oSrc.hidden = true;
}

Et là ça fonctionne Smiley cligne
Tu remarqueras au passage que j'utilise l'attribut de l'object oSrc directement en le faisant passer à true ou false.

EDIT : oui, je suis d'accord avec sepecat sur l'utilisation dans ce cas présent de hasAttribute('hidden')
Modifié par MatthieuR (06 May 2016 - 13:54)
Zelena a écrit :
Bonjour !

Pourquoi ne pas modifier le HTML pour qu'il pose moins de problèmes ?

Ça me parait plus simple...

Smiley smile

C'est effectivement plus simple et cohérent de saisir systématiquement les attributs sous forme nom / valeur... Mais ça fatigue les doigts, semble-t-il Smiley cligne
Perso, je privilégie cette forme complète car elle me paraît plus conforme à l'esprit d'un langage de balisage comme HTML et surtout XHTML.
salut,
si tu cherches une valeur booléenne, le contenu de l'attribut ne t'importera pas du tout dans la mesure où si l'attribut ne contient rien alors il vaudra false (car une chaîne vide en javascript équivaut à false) et dans le cas contraire, il vaudra true vu que la chaîne contiendra quelque chose.

Tu as cependant une erreur de code. La méthode setAttribute requière deux paramètres obligatoires, le premier est le nom de l'attribut est le second est sa valeur (or dans ton exemple tu n'en fournis qu'un seul).

Cela dit, comme déjà évoqué, la façon la plus simple de faire serait de passer simplement par un hasAttribute.
sepecat a écrit :

Perso, je privilégie cette forme complète car elle me paraît plus conforme à l'esprit d'un langage de balisage comme HTML et surtout XHTML.


XHTML, oui absolument. HTML j’en suis moins sûr. Il était clairement dit que c’était une des évolutions d’HTML 5 par rapport au XHTML qu’il était sensé "remplacer"… D’ailleurs, à l’époque, cela avait fait un peu jaser sur les forums… Mais bon, au final chacun fait comme il veut, tant qu’il ne travail pas en équipe. Dans le cas contraire, c’est plus problématique. Par contre, les tut ou autres pages d’explication reprennent souvent la version courte, comme http://www.w3schools.com/tags/att_global_hidden.asp .
Bon, merci tout le monde, je suis arrivé grace à vous à un résultat à la fois fonctionnel et plus simple (sans les setAttribute et removeAttribute) :


displayHidePopin = function( $idSrc ){
    var oSrc = document.getElementById( $idSrc );
    var oHidden =  oSrc.hasAttribute('hidden');

    if (oHidden) {
        oSrc.hidden = false;
    }
    else {
        oSrc.hidden = true;
    }
}
Derwoed a écrit :
Bon, merci tout le monde, je suis arrivé grace à vous à un résultat à la fois fonctionnel et plus simple (sans les setAttribute et removeAttribute) :


displayHidePopin = function( $idSrc ){
    var oSrc = document.getElementById( $idSrc );
    var oHidden =  oSrc.hasAttribute('hidden');

    if (oHidden) {
        oSrc.hidden = false;
    }
    else {
        oSrc.hidden = true;
    }
}

Plus concis et permettant d'éviter le recours à une variable:
oSrc.hidden = !oSrc.hasAttribute("hidden")
Sujet clos
Aller à