javascript - console.log(variableName) 正在打印 ID 为 variableName 的标签的内容，而不是我的变量

Question

所以我有一个非常奇怪的问题，在 JavaScript 中调用 console.log 实际上是打印出标签的内容，标签的 id 属性与我传入的变量的名称相同.

这是我的代码:

<div id="newTypes">
    <div id="noNewTypes" style="text-align: center; width: 100%; margin: 25% 0;">
        ...No new device types to show...
    </div>
    <div id="XNewTypes">
        <script>
            //newTypes has the same name as the parent container's id
            console.log(newTypes);
        </script>
    </div>
    <script>
        $("#btnNewTypes").on("click", function() {          
            if (newTypes.length == 0) {
                $("#noNewTypes").show();
                $("#XNewTypes").hide();
            }
            else {
                $("#noNewTypes").hide();
                $("#XNewTypes").show();
            }
        });
    </script>
</div>

newTypes 实际上是在代码的更上方定义的，它是一个只包含一堆字符串的数组。但我真的认为这与这个问题无关。

现在，这是 console.log(newTypes); 控制台的输出 (对不起，小图片)

所以我非常困惑为什么这会打印出标签的内容而不是变量名，因为我没有调用 console.log($("#newTypes").text()); ，我将变量作为参数传递。

然后可能更奇怪的是，由于某种原因这会导致错误，我决定首先采取简单的方法并将变量重命名为 newTypeArr，但是当我调用console.log(newTypeArr);，我得到的是这样的:

而不是预期的 undefined。

我不认为这是相关的，我很确定上面的 HTML 是所有需要的，但这里是 DOM 的整个部分，它在这里发挥作用，可能是相关的。正如您所看到的，这一切都在 PHP 网页中，但又不应该相关。

<div id="tblLatest">
    <?php searchFilterForm("tblLatest"); ?> 
    <script>
        var dataLatest = <?php echo getLatestDeviceTypes(); ?>;
        for (val of dataLatest) {
            dataLatest[dataLatest.indexOf(val)] = val.replace("\n", "");
        }
        buildTable(dataLatest, "tblLatest");

        setTimeout(function() {
            newTypeArr = ((all, late) => {
                var ret = []
                for (val of late) 
                    if (all.indexOf(val) == -1)
                        ret.push(val);
                return ret;
            })(dataAll, dataLatest); 

        }, 1000);
    </script>
</div>
<div id="newTypes">
    <div id="noNewTypes" style="text-align: center; width: 100%; margin: 25% 0;">
        ...No new device types to show...
    </div>
    <div id="XNewTypes">
        <script>
            //newTypes has the same name as the parent container's id
            console.log(newTypes);
        </script>
    </div>
    <script>
        $("#btnNewTypes").on("click", function() {          
            if (newTypes.length == 0) {
                $("#noNewTypes").show();
                $("#XNewTypes").hide();
            }
            else {
                $("#noNewTypes").hide();
                $("#XNewTypes").show();
            }
        });
    </script>
</div>

现在，newTypes/newTypeArr，无论其命名如何，都在异步的 setTimeout 函数中声明，因此 newTypes/newTypeArr 很可能不会被定义，并且会像我提到的那样打印 undefined，然而，这是我可以解决的问题。它不应该打印 id 与 newTypes 匹配的标签或错误，这让我感到困惑。

Answer 1

一个鲜为人知的事实是，在元素标签上提供 ID 将创建一个相应的同名 GLOBAL javascript 变量。

凯尔·辛普森:Global DOM variables

基本上，您需要重新考虑，通过将变量命名为与您的 ID 相同，您实际上是在声明变量两次。更重要的是，其中一个声明位于全局范围内，因此永远不会是 undefined。

解决方法很简单。 不要使用 HTML 中定义的 ID 作为 javascript 变量名，或者不要在 HTML 元素上使用 id。

你是否想知道为什么我们需要 document.getElementById，对吗？