Hey there! I'm having an issue with my code snippet. My goal is to change the background color of both fields with the class 'navicon', as shown in the function fu(). However, it's not working as expected. Changing the color based on id is fine, but I prefer not to give each button a specific id. Any ideas on what I might be doing wrong? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<! <link rel="stylesheet" href="css/navside.css" type="text/css">
<style>
.navside {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navside a {
float: center;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navside a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<script>
function fun(){
document.getElementById("demo").style.backgroundColor="red";
function fu(){
var all = document.getElementsByClassName('navicon');
for(var i=0;i<all.length;i++){
all[i].style.backgroundColor='red';
}
}
}
</script>
<div class="navside">
<a class="navicon" id="demo" href="#bla" onclick="fun()" >Text1</a><br>
<a class="navicon" href="#blubb" onclick="fu()">Text2</a>
</div>
</body>
</html>