Élément nul javascript avec affichage: aucun

Question

J'ai créé une page où element1.style.display='none' par défaut. Maintenant, j'ai un autre élément, element2, qui, lorsqu'il est cliqué, affiche element1. Mais en essayant de mettre le element1 à une fonction qui définit element1.style.display="block", il me donne une erreur en disant element1 est nulle. Je comprends c'est parce que display=none par défaut.

Comment puis-je résoudre ce problème? c'est en utilisant javascript et pas jquery.

var hash = location.hash; 
alert(hash); 

function init() { 
    if(hash == '#menu-a' || hash == '') { 
     document.getElementById('menu-a').style.display = 'block'; 
    } 
    else if(hash == '#menu-b') { 
     document.getElementById('menu-b').style.display = 'block'; 
    } 
    else { 
     document.getElementById('menu-c').style.display = 'block'; 
    } 
} 

window.onload=init; 

Answer 1

Si l'élément caché est toujours dans le même ordre que vous pouvez essayer d'y accéder avec getElementsByTagName (« ») [arrayindex].

Answer 2

Il y a une chance que le javascript soit déclenché avant dom ready? element1 existe-t-il dans dom tree au moment où vous voulez y accéder?

Answer 3

Je comprends c'est parce que l'affichage par défaut = aucun

Non, c'est parce que rien n'a été affecté à la variable.

Je suppose que vous attendez un élément avec id="element1" pour créer automatiquement une variable JavaScript appelée element1 - il ne devrait pas.

document.getElementById('element1').style.display = 'block'; 

Answer 4

Vous devriez faire display:block peu de temps lorsque element est initialisé, et revenir ensuite à display:none juste après l'initialisation.

Answer 5

J'ai eu un problème similaire: tous les navigateurs ne traitent pas les éléments avec display:none (ou au moins leurs enfants) de la même manière. J'ai quelques objets SVG placés dans deux DIVs et je veux montrer l'un ou l'autre. Au cours de l'initialisation, je fais quelques manipulations sur les éléments SVG (modifiez certains éléments de texte à l'intérieur du SVG). Cela a fonctionné parfaitement avec Firefox mais a échoué avec Opera, Chrome et IE. Dans ces navigateurs, les éléments qui se trouvaient à l'intérieur d'une div avec display:none ont donné un résultat nul en essayant de les obtenir avec document.getElementById(myID). Une première solution consistait à définir la propriété display:none uniquement après l'initialisation (cela a fonctionné), mais lorsque je voulais les afficher à nouveau, toute l'initialisation était perdue (les étiquettes de texte étaient toutes à leur valeur par défaut). Je pense que cela prouve que le contenu d'un DIV avec display:none est en quelque sorte effacé du DOM, pas simplement caché. J'ai essayé aussi d'utiliser visibility:hidden au lieu de display:none mais cela a fait un gros désordre avec la mise en page. La seule solution qui semble fonctionner sur tous les navigateurs est (jusqu'à présent) pour placer la DIV Je veux cacher dans « l'espace extra-atmosphérique » comme it is suggested here...

position: absolute; 
top: -9999px; 
left: -9999px; 

Answer 6

Je suppose que vous changez le style de cet élément avant même cet élément est généré dans votre page html. Lorsque vous essayez d'accéder à un élément dans une page Web, si cet élément n'est pas disponible dans la page à ce moment-là, il retourne Null Ma suggestion est d'exécuter cette partie javascript après le chargement complet de ces éléments, en utilisant des attributs comme, onclick, onload, etc ...