Javascript не работает правильно - все перепробовал - PullRequest
1 голос
/ 03 мая 2020

My javascript имеет только одну строку кода и получает ошибку "getElementById null".

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;
}

Я запускаю Visual Studio Code и проверил ссылку на js. Я также пытался запустить его внутри файла HTML.

Ответы [ 3 ]

1 голос
/ 03 мая 2020

Вы можете попробовать это:

window.addEventListener('DOMContentLoaded', function(e) {
    document.getElementById("menu-background").style.left = "0";    
});
0 голосов
/ 03 мая 2020

Я обнаружил проблему !!!

Мой HTML файл был назван "main. html", и когда я переименовал его в "index. html", он работал!

Спасибо за быстрые ответы, ребята. Я здесь новичок, так что я действительно это имею в виду.

0 голосов
/ 03 мая 2020

Вы должны поставить script в конце документа, чтобы элемент был определен до его достижения:

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...