Question

我正在用CSS，html和js编写一个网站。我试图在html运行后自动点击一个按钮。我尝试了两种不同的方法，但都没有效果。方法1：

<body>
   ...
   <button class="tablink" onclick="openPage('Crime', this, '#CFDBD5')" id="defaultOpen">Crime</button>
   <button class="tablink" onclick="openPage('Campus', this, '#CFDBD5')">Campus</button>
   <button class="tablink" onclick="openPage('Time', this, '#CFDBD5')">Time</button>
   ...
<script>
    function openPage(pageName,elmnt,color) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
           tablinks[i].style.backgroundColor = "";
           tablinks[i].style.color = '#CFDBD5';
        }
        document.getElementById(pageName).style.display = "block";
        elmnt.style.backgroundColor = color;
        elmnt.style.color = '#273043';
    }

    document.getElementById("defaultOpen").click();
</script>
...
</body>

在这种方法中，我希望行document.getElementById("defaultOpen").click();可以做到，但它似乎没有运行。

方法2：与方法1类似，但<body onload="setUp()">和document.getElementById("defaultOpen").click();位于名为setUp的函数中。

Answer 1

试试这个：

window.addEventListener("load", function(event) {
    document.getElementById("defaultOpen").click();
});

Answer 2

我建议您直接调用函数openPage('Crime', this, '#CFDBD5')。

使用事件 DOMContentLoaded 在DOM完全加载时执行该功能。

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed"); // This is just for debugging.

  openPage('Crime', this, '#CFDBD5');
  // or document.getElementById("defaultOpen").click();
});

Answer 3

不知何故，我正在处理的文件被复制到另一个目录中，我在浏览器中刷新的文件是那个文件而不是我正在更改的文件，这解释了为什么控制台中没有记录任何内容。

如何在页面加载时运行js代码

3 个答案: