Script JS pour réveler/cacher des éléments

j'aime pas css

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

hello ! je suis déjà de retour :)

donc, je continuais à développer, et je me heurte à un nouveau problème : avec js, j'arrive à changer l'image d'éléments avec onclick()

1
2
3
4
5
6
7
8
9
function ChangeClick(id){   
    var onglets = document.getElementsByClassName("onglet");

    for (var i = 0; i < onglets.length; i++) {
        onglets[i].src = "images/"+onglets[i].id+"_inactif.jpg"
    };

    document.getElementById(id).setAttribute("src", "images/"+id+"_actif.jpg");
}

cette fonction permet d'avoir des petits onglets, avec une image, qui change quand on clique sur l'un d'entre eux

j'aimerais faire la même chose avec mes <div> qui continnent des vidéos. j'utilise donc le même script, légèrement modifié pour cette-fois ci fixer la valeur de "display" à "block" ou "none"

1
2
3
4
5
6
7
8
9
function makeVisible(id){
    var videos = document.getElementsByClassName("video");

    for (var i = 0; i < videos.length; i++) {
        videos[i].style = "display:none;"
    };

    document.getElementById(id).setAttribute("style", "display:block");
}

mais cette-fois ci, il me retourne

1
2
3
4
TypeError: document.getElementById(...) is null


document.getElementById(id).setAttribute("style", "display:block");

comme si les éléments avec display:none disparaissaient ¯_(ツ)_/¯ une idée ?

ps: j'ai commencé js il y a 3 semaines

précision : pour les onglets, mon script me renvoie la même erreur mais fonctionne quand même o.O

ok j'ai oublié de mettre des "" autour des mes id que je passe en paramètre. du coup ça marchait pas bah oui

POUR TOUS CEUX QUI ONT EU LA MEME ERREUR : relisez vous mieux

Édité par Teillo

+0 -0

Cette réponse a aidé l'auteur du sujet

Salut !

Petite chose à laquelle faire attention : il y a une subtile différence entre les attributs et les propriétés, donc les effets de setAttribute() et setProperty().

Les attributs sont dans le code HTML, et sont "lus et transformés" en propriétés par le navigateur. En gros, les attributs définissent les propriétés. L'inverse n'est pas vrai.

setAttribute() va vraiment modifier le HTML, donc va créer un attribut du nom donné, avec la valeur donnée (ou donner la nouvelle valeur à l'attribut). La plupart des navigateurs vont bien gentiment mettre à jour les propriétés de l'élément liées à l'attribut ainsi modifié, mais dans certains cas, cela ne fera rien. Parce que certains attributs ne peuvent pas muter (changer de valeur), donc s'ils ont déjà une valeur, la propriété liée à celle-ci ne pourra pas être changée en modifiant le code HTML de l'élément, ce que fait setAttribute(). Parmi ces attributs, il y a selected et checked, notamment.

Du coup, il vaut mieux modifier les propriétés que les attributs, c'est plus sûr.  ;)

Evitez qu'on vous dise de les lire : FAQ PHP et Symfony 2Tutoriel WAMP • Cliquez 👍 pour dire merci • Marquez vos sujets résolus

+2 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte