Не работает classlist.add

Question

Что делать при нажатие на кнопку текст должен двигаться в право а потом обратно вернуться но он двигается когда загружен сайт помогите пожалуйста кто поможет большое спасибо

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Test.css">
</head>
<body>
<span id="Text">Текст</span>
<button id="Button" onclick="ButtonClick()">Нажать</button>
</body>
<script src="Test.js"></script>
</html>

Css:

@keyframes Textanim {
    0%{
        padding-left: 0;
    }
    50%{
        padding-left: 100px;
    }
    100%{
        padding-left: 0;
    }
}
#Text{
    animation: Textanim 1s, infinite linear;
}

Js:

let text = document.getElementById("Text");

function ButtonClick()
{
    if(!text.classList.add("Text"))
    {
        text.classList.add("Text");
    }

}

Answer 1

classlist.add у вас не работает, потому что, ваш код никакого класса не добавляет. Точнее вы пытаетесь добавить ID синтаксисом для добавления класса. Если порпавить ваш код, чтобы работал, то можно так. А текст должен двигаться при каждом нажатии на кнопку?:

let text = document.getElementById("Text");
let btn = document.getElementById("Button");


btn.addEventListener('click', ()=>{
text.classList.add('text');
//setTimeout(
//()=>{text.classList.remove('text')}, 1000)
})

text.addEventListener('animationend', ()=>{
text.classList.remove('text')
})

@keyframes Textanim {
    0%{
        padding-left: 0;
    }
    50%{
        padding-left: 100px;
    }
    100%{
        padding-left: 0;
    }
}
.text{
    animation: Textanim 1s, infinite linear;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Test.css">
</head>
<body>
<span id="Text">Текст</span>
<button id="Button">Нажать</button>
</body>
<script src="Test.js"></script>
</html>

БЛОГ НА HUSL

Не работает classlist.add

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