Почему не меняется задний фон и цвет текста?

Question

Как бы это смешно не звучало, но стоклнулся с проблемой при ответе на вопрос XD

Надо чтобы у элемента менялась картинка заднего фона и цвет текста через 1 с. Но этого не происходит, хотя я меняю id его. Что делаю не так? -_-

function toogleBackground(){
 let element = document.getElementsByClassName("toogleParagraph");
    if(element.id == 'gg'){
        element.id = 'bg';
    }else{
        element.id = 'gg';
    };
};

setInterval(toogleBackground, 1000);

#gg{
    background-image: url(img/1.jpg);
    color: chocolate;
    width: 100%;
    height: 900px;
}
#bg{
    background-image: url(img/2.jpg);
    color: chartreuse;
    width: 100%;
    height: 900px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Это моя программа</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <p class='toogleParagraph' id='gg'>Вот туты должна меняться картинка</p>
    </div>
    <script src='script.js'></script>
</body>
</html>

PS 100% ошибка максимально глупая, просто я слеповат XD

Answer 1

Надо:

let element = document.getElementsByClassName("toogleParagraph")[0];

менять у элемента id - дурной тон. можно же заюзать любой другой атрибут, добавить -удалить класс, просто свойство Style изменить...

БЛОГ НА HUSL

Почему не меняется задний фон и цвет текста?

Ответы (1 шт):