I'm facing an issue trying to modify a div's property from a JavaScript file. It works when placed inside the body, but I need it to function from an external JS file for a specific project.
Here is the structure of my files:
<!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>
CSS File:
*{
box-sizing: border-box;
}
#calendar-view{
float: left;
width: 70%;
background-color: blue;
height: 200px;
}
#events-view{
float: left;
width: 30%;
height: 200px;
background-color: red;
}
#container::after{
content: "";
clear: both;
display: table;
}
JavaScript File:
function startUp(){
document.getElementById("calendar-view").style.display = "none";
}
startUp();
I'm encountering difficulty in altering a div's property through an external JavaScript file rather than within the body itself for a specific project.