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并打印{{1}正如我所提到的，然而，这是我可以解决的问题。它不应该打印id匹配newTypes的标签或者错误，这是令我困惑的。

Answer 1

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

凯尔辛普森：Global DOM variables

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

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

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

Answer 2

使用window [element id]或window [element name]获取元素是自Firefox 14以来所有现代浏览器实现的标准行为。

This answer解释了为什么提供元素ID将返回该元素的内容。

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

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打印标记的内容，而不是我的变量

2 个答案: