@Scriptoo

Почему блок не меняет цвет?

Выдает ошибки
1)Uncaught TypeError: Cannot set property 'onclick' of null
at index.js:1
2)Uncaught TypeError: Cannot set property 'backgroundColor' of undefined
at HTMLButtonElement.document.getElementById.onclick (index.js:6)
<body>
    <p>Login: <input type="text" id="login"></p>
    <p>Password: <input type="text" id="password"></p>
    <button id="check">Login</button>
    <div class="info-block"><span id="info"></span></div>
    <script src="js/index.js"></script>
</body>

Код на js
document.getElementById('check').onclick = function(){
    let login = document.getElementById('login').value;
    let password = document.getElementById('password').value;
    let info_block = document.getElementsByClassName('info-block')
    if(login == 'admin' && password == '1'){
        info_block.style.backgroundColor = 'greenyellow'
        info.innerHTML = "Авторизация выполнена успешно!!"
    }
    else {
        // info_block.style.backgroundColor = 'lightcoral';
        info.innerHTML = "err!!"
    }
}
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript
Во-первых, если подключаете скрипт не перед закрытием body, то поместите его туда.
Во-вторых, document.getElementsByClassName возвращает HTMLCollection - массив, который будет автоматически изменять свое содержимое при изменениях на странице. Поэтому, либо берете из него первый элемент, либо используете document.querySelector.

Также, неплохо было бы проверять элементы, прежде чем добавлять им события; вместо onevent использовать element.addEventListener('event', handler);; вместо == использовать ===; вместо style.backgroundColor использовать style.setProperty('background-color', value);.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы