Не удалось выполнить «getComputedStyle» в «Window»: параметр 1 не имеет типа «Элемент». Я получаю эту ошибку

Я новичок в Javascript и не могу понять, почему я получаю эту ошибку. Вот мой код:

const bckg = document.querySelector(".bckg");
const compStyle = getComputedStyle(bckg);
body {
    box-sizing: content-box;
    position: relative;
}   
.visible {
    position: relative;
    top: 50px;
    margin: auto;
    background-color: bisque;
    height: 300px;
    width: 600px;
    overflow: hidden;
    

}
.bckg {
    position: absolute;
    left: 0px;
    width: 1200px;
    height: 300px;
    background-image: url("bckg.jpg")
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Game</title>
    <link rel="stylesheet" href="styles.css">
   
</head>
<body>
    <script src="script.js"></script>
    <div class="visible">
        <div class="bckg" id="bckg">
            <div class="player"></div>
            <div class="obstacle"></div>
        </div>
    </div>
</body>
</html>

Эта ошибка, которую я получаю в Mozilla: «Uncaught TypeError: Window.getComputedStyle: аргумент 1 не является объектом». Что бы это могло быть?

Вы знаете, что это проблема, связанная с javascript, но до сих пор не предоставили код javascript

KasRoudra 23.04.2022 01:09

Отвечает ли это на ваш вопрос? Изменить текст метки с помощью JavaScript

Tibrogargan 23.04.2022 01:55
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
2
44
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ваш тег script должен быть перемещен в последнюю часть тела. Скрипт загружен слишком рано. Если вы прочитали сообщение об ошибке. Не смог найти аргумент

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Game</title>
    <link rel="stylesheet" href="styles.css">
   
</head>
<body>
    
    <div class="visible">
        <div class="bckg" id="bckg">
            <div class="player"></div>
            <div class="obstacle"> 
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Этот ответ был бы лучше, если бы он четко описывал причину проблемы.

Tibrogargan 23.04.2022 01:52

Дельта Боукенша права - ваш документ еще не закончил загрузку. Поэтому либо поместите свой скрипт в нижнюю часть разметки, как предлагает Delta, либо используйте служебную функцию для запуска кода после отображения документа, например:

function whenDOMready( func ) {
  switch( String( document.readyState ) ) {
    case "complete":
    case "loaded":
    case "interactive":
      func();
      break;
    default:
      window.addEventListener("DOMContentLoaded", (e) => func());
  }
}

Затем вызовите его из любого места, где хотите:

let bckg;
let compStyle;

function domReady() {
    bckg = document.querySelector(".bckg");
    compStyle = getComputedStyle(bckg);
    /* ...other code here */
}

whenDOMready( domReady );

Эта утилита дает вам два преимущества:

  1. Независимо от того, когда вы его вызываете, он будет работать - либо немедленно вызывая вашу функцию (func), либо когда срабатывает событие DOMContentLoaded. Если вы просто добавите прослушиватель событий напрямую, вам придется беспокоиться о том, сработало ли оно уже или нет.
  2. Вам гарантируется, что ваш DOM готов к проверке и доступу.

Другие вопросы по теме