Почему не работает код Javascript?

Question

[Razor1121]

let button = document.querySelector('.button');
let divBg = document.querySelector('.box1');

  function changeBackground(color) {
    divBg.style.background = color;
 }
 
 button.addEventListener("click",function() { changeBackground('black') });

Выдает null на addEventListener, сам новичок. Если вам будет не трудно, можете объяснить подробно в чем ошибка)

Answer 1

[Loli E1ON]

Селектор не верный.
https://learn.javascript.ru/css-scoping

Comments

[Razor1121]

Вот html и css, еще маленький вопрос, обязательно ли прописывать id или достаточно задать класс?

<div class="box__set">
        <div class="box1" id="box1"></div>
        <input type="button" id="button" value="Кнопка">
    </div>

.box1 {
   background-color: red; 
   width: 100px;
   height: 100px;
}

[Андрей Чирков]

Razor1121, у кнопки есть свой тег <button>Кнопка</button>
В этом дело или нет я не знаю, но попробуй

[Loli E1ON]

Razor1121, можно просто по классу. У вас на кнопке нету класса button, по этому и null

[Razor1121]

Да, проблема была в замене input на button, но я думал, он должен обращать внимание на селекторы, почему же он так не сработал?

[Aetae]

Razor1121 , id="button" - это #button, не путать с class="box1" - .box1.

[Loli E1ON]

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

[Razor1121]

Спасибо, понял)

Answer 2

[Андрей Чирков]

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

Comments

[Razor1121]

Прописал перед закрывающем тегом /body