CODEWITHSUNDEEP
javascripthtmljquerycssleaflet
Paulkkkkkkkk
Paulkkkkkkkk

Reputation: 31

How to change the property of a css class on click on a button?

I am trying to change the property of a CSS class on click on a button. Firstly i have this button in my html

   <button id="Regions" active="false" 
class="btn-square orangee-border grow" 
data-target="#square1">Private Cloud Regions</button>

Then i have this css class where i want to change the property from display: none to display: block on click on the previous button!

.zone-marker {
        font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
position: absolute;
    width:auto;
  font-size: 12px !important;
  z-index: inherit !important;
display: none;
  }

I have try

document.querySelector('#Regions').addEventListener('click', () => {
  document.querySelector('.zone-marker').classList.add('myClass');
});

to apply the same class with just with a display block!

.zone-marker {
        font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
position: absolute;
    width:auto;
  font-size: 12px !important;
  z-index: inherit !important;
display: block;
  }

It doesn't work.. If anyone knows it would be great !

Upvotes: 0

Views: 458

Answers (2)

user16224923
user16224923

Reputation:

Could this be want you are trying todo.

document.querySelector('#Regions').addEventListener('click', () => {
  document.querySelector('.zone-marker').style.display = "block";
});
.zone-marker {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  position: absolute;
  width: auto;
  z-index: inherit !important;
  display: none;
}
<button id="Regions" active="false" class="btn-square orangee-border grow" data-target="#square1">Private Cloud Regions</button>
<div class="zone-marker">JUST A DIV</div>

Or you can toggle display from none to block with this.

document.querySelector('#Regions').addEventListener('click', () => {
  const el = document.getElementsByClassName('zone-marker')[0];

  if (el.style.display === "block") {
    el.style.display = "none";
  } else {
    el.style.display = "block";
  }
});
.zone-marker {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  position: absolute;
  width: auto;
  z-index: inherit !important;
  display: none;
}
<button id="Regions" active="false" class="btn-square orangee-border grow" data-target="#square1">Private Cloud Regions</button>
<div class="zone-marker">JUST A DIV</div>

If you have multiple elements with the same class zone-marker and want to toggle display from none to block on all of them you can try this below.

document.querySelector('#Regions').addEventListener('click', () => {
  const el = document.getElementsByClassName('zone-marker');

  Array.from(el).forEach(el => {
    if (el.style.display === "block") {
      el.style.display = "none";
    } else {
      el.style.display = "block";
    }
  });
});
.zone-marker {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  width: auto;
  z-index: inherit !important;
  display: none;
}
<button id="Regions" active="false" class="btn-square orangee-border grow" data-target="#square1">Private Cloud Regions</button>
<div class="zone-marker">JUST A DIV 1</div>
<div class="zone-marker">JUST A DIV 2</div>
<div class="zone-marker">JUST A DIV 3</div>
<div class="zone-marker">JUST A DIV 4</div>
<div class="zone-marker">JUST A DIV 5</div>

Upvotes: 1

Peter Toth
Peter Toth

Reputation: 770

Here is a minimal JS fiddle example: HTML:

 <button id="Regions" active="false" 
    class="btn-square orangee-border grow" 
    data-target="#square1"
    onclick="change()"
    >Private Cloud Regions</button>

js:

function change() {
document.getElementById('Regions').style.color = "red"
}

css:

.zone-marker {
        font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
position: absolute;
    width:auto;
  font-size: 12px !important;
  z-index: inherit !important;
display: none;
  }

https://jsfiddle.net/j6f4vm5d/1/

Upvotes: 1

Related Questions