NO JQUERY Please
My animation is not working properly I tried to use document.getElementsByClassName but it won’t work at all there’s no error is just that the element is not animating properly.
I want to do a quick change of color and also a small lettering animation but it will not implement on click, nothing will happen. Please help also if there’s any good book about how this works I would appreciate that too.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAVASCRIPT PRACTICA</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/PRACTICA JS.css">
</head>
<body>
<div class="contenedor"><!--Name of the Flexbox Container-->
<button class="botonTriggerGreen">Luigi</button><!--Trigger Green//button to press-->
<button class="botonTriggerRed" onclick="botonMario()">Mario</button><!--Trigger Red//button to press-->
<button class="botonTriggerBlue">Toad</button><!--Trigger Blue//button to press-->
</div>
<div class="cuadroContenido">
<h1 class="tituloCuadro">Mario
<p class="contentMario">
Mario (マリオ?) es un personaje ficticio de la franquicia de videojuegos homónima diseñado por el japonés Shigeru Miyamoto para la compañía Nintendo. Actuando como la mascota de la compañía, con su aparición en videojuegos, series televisivas y películas, se ha posicionado como el ícono emblemático de Nintendo, llegando a ser uno de los personajes más famosos y conocidos de videojuegos de todos los tiempos, junto a su hermano menor Luigi, quien es su compañero ícono en diversos juegos y lo ayuda a cumplir su misión.
</p>
</h1>
</div>
<script>
function botonMario() {
document.getElementsByClassName("contentMario").style.animationPlaystate="running";
}
</script>
</body>
</html>
CSS:
.contenedor{ /*CLASS NAME CONTAINER*/
display:inline-flex; /*Flexbox Setting*/
}
.botonTriggerGreen{ /*CLASS NAME GREEN*/
font-family: 'Bebas Neue', cursive;/*font family for the button*/
letter-spacing: 2px; /*space between letters*/
color:black; /*color of font*/
font-size: 16px; /*font size*/
background-color: #2ECC40; /*Background color*/
margin: auto; /*setting margin*/
width: 120px; /*sizes*/
height: 50px; /*Width for the buttom*/
padding: auto; /*Padding*/
text-align: center; /*align*/
margin-left: 10%; /*Margin 2 center the element*/
margin-top: 10%; /*same*/
border-radius: 6px; /*for rounded corners*/
border: 1.4px solid black; /*border size color*/
box-shadow: 4px 4px 18px #888888;/*shadow for box*/
}
.botonTriggerGreen:hover{ /*cursor while overing set to pointer*/
cursor:pointer;
}
.botonTriggerRed{ /*CLASS NAME RED*/
font-family: 'Bebas Neue', cursive;/*font family for the button*/
letter-spacing: 2px; /*space between letters*/
color:black; /*color of font*/
font-size: 16px; /*font size*/
background-color: #FF4136; /*Background color*/
margin: auto; /*setting margin*/
width: 120px; /*font size*/
height: 50px; /*Width for the buttom*/
padding: auto; /*Padding*/
text-align: center; /*align center*/
margin-left: 10%; /*Margin 2 center the element*/
margin-top: 10%; /*same*/
border-radius: 6px; /*for rounded corners*/
border: 1.4px solid black; /*border shadow color etc*/
box-shadow: 4px 4px 18px #888888; /*cursor while overing set to pointer*/
}
.botonTriggerRed:hover{
cursor:pointer; /*cursor while overing set to pointer*/
}
.botonTriggerBlue{ /*CLASS NAME BLUE*/
font-family: 'Bebas Neue', cursive;/*Font name*/
letter-spacing: 2px; /*space between letters*/
color:black; /*color of the font*/
font-size: 16px; /*Font size*/
background-color:#39CCCC; /*Background color*/
margin: auto; /*setting margin*/
width: 120px; /*size of the font*/
height: 50px; /*Width for the buttom*/
padding: auto; /*Padding*/
text-align: center; /*align center*/
margin-left: 10%; /*Margin 2 center the element*/
margin-top: 10%; /*same*/
border-radius: 6px; /*for rounded corners*/
border: 1.4px solid black; /*border color and size*/
box-shadow: 4px 4px 18px #888888;/*shadow of the boxes*/
}
.botonTriggerBlue:hover .{ /*cursor while overing set to pointer*/
cursor:pointer;
}
.cuadroContenido{ /*Content Name*/
margin-top: 40px; /*Margin top*/
background-color: #c6c6cc; /*BG color*/
width: 400px; /*Width-Height*/
height: 400px;
border: 1px solid black; /*Border color and size*/
border-radius: 5px; /*4 Rounded Corners*/
margin-left: 2%; /*Margin LEFT*/
box-shadow: 4px 4px 18px #888888; /*shadow of the box Content*/
animation-name: marioColorRed; /*COLOR ANIMATION*/
animation-duration: 1s; /*COLOR ANIMATION*/
animation-fill-mode: forwards; /*COLOR ANIMATION*/
animation-play-state: paused; /*COLOR PAUSED*/
}
.cuadroContenido:hover{
cursor:text;
}
.tituloCuadro{ /*NAME HEADER FOR CONTENT*/
font-size: 30px;
text-align: center;
font-family: 'Bree Serif', serif;
}
.tituloCuadro>p{
/*padding-top: 90px;*/
color:black;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
animation-name: marioDownwardsAnimation;/*DOWNARDS ANIMATION*/
animation-duration: 1s; /*DOWNARDS ANIMATION*/
animation-iteration-count: 1; /*DOWNARDS ANIMATION*/
animation-fill-mode: forwards; /*DOWNARDS ANIMATION*/
animation-play-state: paused; /*DOWNARDS PAUSE*/
}
@keyframes marioDownwardsAnimation{
from{ padding-top: 0px;}
to{padding-top: 90px;}
}
@keyframes marioColorRed{
from{background-color:#c6c6cc ;}
to{background-color: #ff544a }
}
Advertisement
Answer
When you use document.getElementsByClassName, you are referencing an array of elements with that class. You need to specify which one you want by referring to the element’s index. Instead, use document.getElementsByClassName("contentMario")[0].style.animationPlaystate="running";.