Adding CSS to element with an id-CodePudding

This is the button:

<button id="get-away">LEAVE SITE</button>

The reason why I made it get-away? I added this Jquery and Javascript functionality to it:

function getAway() {
  // Get away right now
  window.open("http://weather.com", "\_newtab");
  // Replace current site with another benign site
  window.location.replace('http://google.com');
}

$(function() {

  $("#get-away").on("click", function(e) {
    getAway();
  });

  $("#get-away a").on("click", function(e) {
    // allow the link to work
    e.stopPropagation();
  });

  $(document).keyup(function(e) {
    if (e.keyCode == 27) { // escape key
      getAway();
    }
  });

});

Now, how do I add the CSS to this button? This is my css btw:

.get-away {
    border: none;
    color: red;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.get-away {background-color: red;} /* red*/

CodePudding user response：

if you want to add .get-away class to your #get-away button on click

  $("#get-away").on("click", function(e) {
     $("#get-away").toggleClass("get-away");
    getAway();
  });

CodePudding user response：

you are givving an id to button and applying the css with ".get-away" it should be "#get-away" for understanding basic of class and Id check this link classVsId

#get-away { 
  border: none; 
  color: #fff; 
  padding: 15px 32px; 
  text-align: center; 
  text-decoration: none; 
  display: inline-block; 
  font-size: 16px; 
  margin: 4px 2px; 
  cursor: pointer; 
}

#get-away {
  background-color: red;
} /* red*/

<button id="get-away">LEAVE SITE</button>