外部javascript文件在HTML文件中不起作用_Javascript_Html_Css

外部javascript文件在HTML文件中不起作用

javascript html css

外部javascript文件在HTML文件中不起作用,javascript,html,css,Javascript,Html,Css,我试图从javascript文件更改div的属性，但它不起作用，如果我把它放在body中，它就起作用了，但我想从外部js文件为某个项目处理它 HTML文件 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Calendar</title>

我试图从javascript文件更改div的属性，但它不起作用，如果我把它放在body中，它就起作用了，但我想从外部js文件为某个项目处理它

HTML文件

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Calendar</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="javascript/cal.js"></script>
  </head>
  <body>

    <div id="container">

      <div id="calendar-view">

      </div>

      <div id="events-view">

      </div>

    </div>


  </body>
</html>

Javascript文件

function startUp(){
  document.getElementById("calendar-view").style.display = "none";
}

startUp();

我正试图从javascript文件更改div的属性，但它不起作用，如果我将其放在body中，它就起作用，但我想从外部js文件为某个项目使用它。

当您在

导入js文件时，您的js将加载，然后是您的body

当您在

之后导入JS文件时，您的身体会加载，然后是JS

第一种解决方案是将JS文件放在第二种解决方案之后，即将函数调用放在中。您必须将

放在

标记的末尾

在浏览器通过HTML获取元素之前，您无法从DOM获取元素。

我建议将其放在eventListener window.onload中，以确保在创建元素后执行函数。把你的脚本放在正文里谢谢你的帮助，我把js文件放在标题里这就是问题所在谢谢你告诉我顺序，它成功了

function startUp(){
  document.getElementById("calendar-view").style.display = "none";
}

startUp();