I am trying to retrieve all elements with a specific class using document.getElementsByClassName();
<body>
<div class="circle" id="red"></div>
<div class="circle" id="blue"></div>
<div class="circle" id="yellow"></div>
<input id="disappear" type="button" value="disappear" onclick="disappear()">
</body>
<script>
function disappear(){
document.getElementsByClassName(".circle").style.display = none;
}
</script>
I attempted to make those circles disappear by using
document.getElementsByClassName(".circle").style.display = none;Unfortunately, this approach did not work as expected, so I resorted to the following code:
function disappear(){
var x, i;
x = document.querySelectorAll(".circle");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
Now I am wondering if there is a way to select all classes without having to loop through each element?