是什么导致 getElementbyID 失败

Question

我处于脑死亡模式。我正在尝试使用 google 地图，而我刚开始使用虚拟 html。以下代码有效，但如果我将地图 div 放入容器中或只是更改名称，则无法找到 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>

如果我删除注释并运行使用容器 div，getElementByID 将失败。

如果我将 id 从 map 更改为 map2（在两个地方），getelement 将失败。

我知道我在做一些非常愚蠢的事情，但我就是看不出来。

开发环境是括号，推一个chrome浏览器。（我的密钥从 API 调用中删除）

Answer 1

在 Google 示例中，您会发现需要将地图的高度设置为其容器的 100%。这是他们自己示例中的 CSS：

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

通过将其包装在容器中，您导致地图的 100% 成为 0，这是其父级 div (#container) 的高度。这里最简单的修复是：

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

这是一个有效的 fiddle：https://jsfiddle.net/5bg9gkL9/2/。

Answer 2

If i change the id from map to map2 (in both places)

这是你的问题。

在任何 DOM（HTML、SVG、XML 等）中，id 必须是唯一的。我所说的唯一是指只有一个元素必须具有特定的 ID。如果两个或多个元素具有相同的 id，则视为错误。

HTML 是一种非常宽松的语言，不会在开发人员出错时抛出错误消息。相反，浏览器会自动尝试猜测您的意思。

没有标准规定当有两个或更多相同的 ID 时浏览器应该做什么。所以 getElementById 在这种情况下可以为所欲为。不同的浏览器可能会做不同的事情。

失败不是getElementById。失败是两个具有相同 id 的元素。

对于您正在尝试做的事情，请改用 class 和 getElementsByClassName。请注意：它是 elementS 的 class 名称，复数形式。

是什么导致 getElementbyID 失败

What is causing getElementbyID to fail

javascript

getelementbyid