how to close a button in one click without id but with a class

February 22, 2023

I would like to hide a button or close it but without ID just with a class
I tried with the code below but it doesn’t work

<input type="button" value="Click" class="visible">
<script>
input = document.getElementsByClassName('.visible');

input.addEventListener('click', function(){
   input.style.display = 'none';
});
</script>

>Solution :

As the name suggests, document.getElementsByClassName returns a collection of elements, where document.getElementById returns a single element.

So, you’ll need to loop over the elements and install the handler on each one in turn. This is easiest if you convert it to an Array first:

inputs = document.getElementsByClassName('visible'); // not ".visible"

Array.from(inputs).forEach(function(input) {
   input.addEventListener('click', function(){
      input.style.display = 'none';
   });
});