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 将创建一个相应的同名全局 javascript 变量。

凯尔·辛普森：Global DOM variables

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

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

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

Answer 2

Getting an element using window[element id] or window[element name] is standard behavior implemented by all modern browsers since Firefox 14.

This answer 解释了为什么提供元素 ID 会 return 该元素的内容。

关于你的变量问题，这是范围问题。全局定义变量将解决问题。

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

    }, 1000);
...
console.log(newTypeArr);

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

console.log(variableName) is printing the contents of a tag with the ID variableName, not my variable

html

javascript

php

jquery

console.log