Without Using JQUERY
The animation I'm trying to create isn't functioning properly. I attempted to utilize document.getElementsByClassName, but it's not working as expected. There are no errors, but the element is not animating correctly.
I am looking to make a quick color change and a small text animation on click, but nothing happens. I would appreciate any assistance in resolving this issue as well as recommendations for good books that explain how this works.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAVASCRIPT PRACTICE</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
...
</body>
</html>
CSS:
.contenedor{
display:inline-flex;
}
.botonTriggerGreen{
font-family: 'Bebas Neue', cursive;
...
}
...