3 votes

Qu'est-ce qui cause l'échec de getElementbyID ?

Je suis en mode mort cérébrale. J'essaie d'utiliser Google Maps et je ne fais que commencer avec mon html factice. Le code suivant fonctionne, mais si je place le div de la carte dans un conteneur ou si je change simplement le nom, il échoue en ne trouvant pas l'ID.

<body>
<!--           
    <section id="container">
        <div id="map"></div>
    </section>
   --> 
    <div id="map"></div>

    <script> 
        function initMap() {
        'use strict';

        var myLatLng = {lat: 14.79445, lng: 120.271364};

        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 6,
            center: myLatLng
        });
        }
    </script>  

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
    </script>

</body>

Si j'enlève les commentaires et que j'exécute cette opération avec le div du conteneur, le getElementByID échoue.

Si je change l'id de map à map2 (dans les deux endroits), le getelement échoue.

Je sais que je fais quelque chose de très stupide, mais je ne le vois pas.

L'environnement de développement est entre parenthèses, poussant un navigateur chrome. (ma clé a été retirée de l'appel API)

2voto

Tomasz Bubała Points 1366

Dans un exemple Google, vous constaterez que vous devez définir la hauteur de la carte pour qu'elle soit égale à 100 % de son conteneur. Voici le CSS de leur propre exemple :

html, body { 
  height: 100%; 
  margin: 0;
  padding: 0; 
} 
#map { 
  height: 100%;
} 

En l'enveloppant dans un récipient, vous avez fait en sorte que la carte soit à 100% 0 qui est la hauteur de son div parent ( #container ). La solution la plus simple est la suivante :

#container, #map {
  height: 100%;
}

Voici un violon en état de marche : https://jsfiddle.net/5bg9gkL9/2/ .

1voto

slebetman Points 28276

Si je change l'id de map à map2 (dans les deux endroits)

C'est votre problème.

Dans tout DOM (HTML, SVG, XML, etc.), un identifiant DOIT ÊTRE UNIQUE. Par unique, je veux dire qu'un seul élément doit avoir un id spécifique. Si deux ou plusieurs éléments ont le même id, cela est considéré comme une erreur.

Le HTML étant un langage très indulgent, il n'envoie pas de messages d'erreur lorsque les développeurs font des erreurs. Au lieu de cela, les navigateurs essaient automatiquement de deviner ce que vous voulez dire.

Il n'y a pas de norme qui spécifie ce qu'un navigateur doit faire s'il y a deux ou plusieurs identifiants identiques. Ainsi, getElementById peut faire ce qu'il veut dans de tels cas. Des navigateurs différents peuvent faire des choses différentes.

L'échec n'est pas getElementById . L'échec est deux éléments ayant le même id.

Pour ce que vous essayez de faire, utilisez class y getElementsByClassName à la place. Prenez note : c'est elementS par le nom de la classe, au pluriel.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X