Javascript not Running Correctly - Tried Everything
Question
My javascript only has one line of code, and it gets the "getElementById null" error.
document.getElementById("menu-background").style.left = "0";
HTML:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javavascript" src="js/main-menu.js"></script>
</head>
<body>
<div id="menu-background">
<div id="main-menu"></div>
</div>
</body>
</html>
CSS:
#menu-background {
position: fixed;
width: 100%;
height: 100%;
background-image: url("images/background.png");
background-position: center;
background-size: cover;
top: 0;
text-align: center;
left: 100%;
}
#main-menu {
width: 60vw;
height: 80vh;
border-style: solid;
border-radius: 1.125em;
border-color: #b88a00;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.75);
transition: all 0.25s;
}
I run visual studio code and have checked the link to the js. I have also tried to run it inside of the HTML file.
3 answers
solution1
1 2020-05-03 18:58:54
You can try this:
window.addEventListener('DOMContentLoaded', function(e) {
document.getElementById("menu-background").style.left = "0";
});
solution2
0 2020-05-03 18:56:14
You should put your script at the end of the document in order for the element to be defined before reaching it:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="menu-background">
<div id="main-menu"></div>
</div>
<script type="text/javavascript" src="js/main-menu.js"></script>
</body>
</html>
solution3
0 2020-05-03 19:25:34
I have found the problem!!!
My HTML file was named "main.html" and when I renamed it to "index.html" it worked!
Thanks for the fast replies, guys. I'm a newcomer here, so I really mean it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.