J'essaie de créer une fonction pour changer la classe active des boutons d'un curseur d'image en classe de survol. Je suis bloqué sur le premier appel pour changer la classe active à la première image qu'il commence sur comme il semble que la fonction est juste ignorée ou peut-être je saute sur quelque chose de petit.
function buttonClick(){
document.getElementsByClassName("dots")[0].className += "active";
}
.active{
transform: scale(1);
opacity: .25;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ukiyo Sushi </title>
<link href = "/style.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<script src = "/script.js"></script>
</head>
<body>
<!--<div class = "hero active">
<div class = "hero1">
<div class = "hero2">-->
<header id = "bg">
<nav class = "navbar">
<a href = "#" class = "logo">Ukiyo Sushi </a>
<ul>
<li><a href ="#" class = "about">About us</a></li>
<li><a href = "#" class = "menu">Menu</a></li>
<li><a href = "#" class = "services">Services</a></li>
<li><a href = "#" class = "contact">Contact</a></li>
</ul>
</nav>
<div class = "sushiPlatter">
<h2 id = "caption">Chef's Special Sushi Platter</h2>
<div class = "dots">
<span class = "dot" onclick = "imgslider(1)"></span>
<span class = "dot" onclick = "imgslider(2)"></span>
<span class = "dot" onclick = "imgslider(3)"></span>
</div>
<a href = "#">View Menu</a>
</div>
</header>
<!--</div>
</div>
</div>-->
<section class = "idkYet">
<div>
<span>hello I am filler content</span>
</div>
</section>
</body>
</html>
