Question

下面的代码行（在我的Javascript文件中）：-

var header = document.getElementById("theheader");

导致标头具有“空”值。在这里，“ theheader”是我的HTML文件中“ h2”类型标题的ID。

所需的输出是：-

<h2 id="theheader" style="color: rgb(114, 58, 76);">

JS文件的script标签在HTML文件的head元素中定义。

通过提供所需的输出，即在任何浏览器控制台中，同一行代码都可以完美地工作即使已经解决了此问题，我也无法找到为什么上面的相同代码在浏览器控制台中有效而在VSCode，Atom等IDE等IDE中无效的答案？

如果有人能为我提供上述查询的答案，尤其是粗体字，我将不胜感激。

Answer 1

一个可能的原因可能是您的代码在DOM完全加载之前正在运行。用DOMContentLoaded包装代码：

在完全加载并解析了初始HTML文档之后，无需等待样式表，图像和子帧完成加载，就会触发DOMContentLoaded事件。

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    //Intro
    alert("Hey! Welcome to my page!!");
    var a = prompt("How are you today?");
    alert("Happy to know that you are " + a);
    var header = document.getElementById("theheader");
    console.log("h2 is " + header);
    header.style.color = "red";   
    function getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
    function changeHeaderColor(){
        colorInput = getRandomColor()
        header.style.color = colorInput;
    }

    setInterval(changeHeaderColor,500);
  });
</script>

<h2 id = "theheader"> Arnab Sinha </h2>

getElementByID（）函数返回空值

1 个答案: