How to Set a JavaScript Onclick Event to a Class with CSS

How do you set a JavaScript onclick event to a class with css

You can't do it with just CSS, but you can do it with Javascript, and (optionally) jQuery.

If you want to do it without jQuery:

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('a');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {
                alert('ho ho ho');
            }
        }
    }
</script>

And to do it without jQuery, and only on a specific class (ex: hohoho):

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('a');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            if(/\bhohoho\b/).match(anchor.className)) {
                anchor.onclick = function() {
                    alert('ho ho ho');
                }
            }
        }
    }
</script>

If you are okay with using jQuery, then you can do this for all anchors:

<script>
    $(document).ready(function() {
        $('a').click(function() {
            alert('ho ho ho');
        });
    });
</script>

And this jQuery snippet to only apply it to anchors with a specific class:

<script>
    $(document).ready(function() {
        $('a.hohoho').click(function() {
            alert('ho ho ho');
        });
    });
</script>

Set onclick event to a class of elements: how to get id of the one clicked? javascript only

When an event is triggered in JavaScript, JavaScript passes an event object to the callback function. Pass that into the signature and you will gain access to element properties.

window.onload = function() {
    const elements = document.getElementsByClassName('nameOfTheClass');
    
    for (const element of elements) {
        element.addEventListener("click", e => {
            console.log("element was clicked", e.target.id, e.target.innerHTML);
        })
    }
}

Change class css with javascript onclick

$(function () {    $("#ribad").click(function () {        $(".javakast").switchClass("javakast", "javakast2");        $(".javakast2").switchClass("javakast2", "javakast");    });});

.javakast{   color:red;}.javakast2{   color:blue;}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div class="ribad" id="ribad">    <div class="javakast" id="javakast">       <h1>Click me to change class</h1>    </div></div>

How to add a css class on click event in JavaScript?

You have the problem because e.addEventListener('click', function(e) ) the e is event Object, you need to replace this :

e.classList.add('active-link');
```
By this
```
e.target.classList.add('active-link');
```

onclick Function to use classList to add and remove CSS classes

All the code to toggle between different tiles and sections is already in your openTabs function. The closeTabs function should be a subset of that code, that just removes the .active-tile class on every tile and sets display: none on every section. Updated working example:

function openTab(tabName, event) {
  event.target.classList.add("active-tile");
  event.target.children[2].classList.add("arrow-up");
  var i, x;
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";

  // Get all the tabs into a collection
  // (don't use .getElementsByClassName()!)
  let tabs = document.querySelectorAll(".tile");

  // Set up a click event handler on each of the tabs
  tabs.forEach(function (tab) {
    tab.addEventListener("click", function (event) {
      // Loop over all the tabs and remove the active class
      tabs.forEach(function (tab) {
        tab.classList.remove("active-tile");
        tab.children[2].classList.remove("arrow-up");
      });

      // Set the background of the clicked tab
      this.classList.add("active-tile");
      tab.children[2].classList.add("arrow-up");
    });
  });
}

function closeTab(tabName, event) {
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  let tabs = document.querySelectorAll(".tile");
  tabs.forEach(function (tab) {
      tab.classList.remove("active-tile");
  });
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding-right: 6rem;
  padding-left: 6rem;
}

.tile,
.active-tile,
.content {
  box-sizing: border-box;
}

.tile > * {
  pointer-events: none;
}

.tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  background-color: #222;
  border: 1px solid grey;
  height: 150px;
  text-align: center;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.active-tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  text-align: center;
  border: 1px solid #000;
  background-color: green;
  cursor: pointer;
}

.content {
  order: 1;
  flex: 1 0 100%;

  /* For visual only  */
  padding: 20px;
  color: white;
  text-align: center;
  border: 1px solid #000;
  background-color: #228b22;
}

.description {
  text-align: left;
}

.icon-spacing {
  margin-top: 24px;
}

/* Clear floats after the tiles */
.box:after {
  content: "";
  display: table;
  clear: both;
}

.closebtn {
  float: right;
  color: white;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

.arrow-up {
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.specialisms-content {
  padding-top: 25px;
  padding-bottom: 25px;
}

/* 
  "Desktop" and above
 */
@media (max-width: 480px) {
  .box {
    flex-direction: column;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .content {
    order: 0;
  }
}

@media (max-width: 768px) {
  .box {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

<div class="box">
  <div class="tile" onclick="openTab('b1', event);">
    <img class="icon-spacing" src="./assets/Icons/Banking.svg" />
    <p>Banking</p>
    <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
  </div>
  <div
       id="b1"
       class="content"
       style="display: none; background: #222"
       >
    <span
          onclick="closeTab('b1', event)"
          class="closebtn"
          >×</span
      >
    <div class="description">
      <h3>Banking</h3>
      <p>
        Description
      </p>
    </div>
  </div>
  <div class="tile" onclick="openTab('b2', event);">
    <img class="icon-spacing" src="./assets/Icons/Regtech.svg" />
    <p>RegTech</p>
    <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
  </div>
  <div
       id="b2"
       class="content"
       style="display: none; background: #222"
       >
    <span
          onclick="closeTab('b2', event)";
          class="closebtn"
          >×</span
      >
    <div class="description">
      <h3>RegTech</h3>
      <p>
        Description
      </p>
    </div>
  </div>
  <div class="tile" onclick="openTab('b3', event);">
    <img class="icon-spacing" src="./assets/Icons/InsurTech.svg" />
    <p>InsurTech</p>
    <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
  </div>
  <div
       id="b3"
       class="content"
       style="display: none; background: #222"
       >
    <span
          onclick="closeTab('b3', event)"
          class="closebtn"
          >×</span
      >
    <div class="description">
      <h3>InsurTech</h3>
      <p>
        Description
      </p>
    </div>
  </div>
  <div class="tile" onclick="openTab('b4', event);">
    <img class="icon-spacing" src="./assets/Icons/Lending.svg" />
    <p>Lending</p>
    <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
  </div>
  <div
       id="b4"
       class="content"
       style="display: none; background: #222"
       >
    <span
          onclick="closeTab('b4', event)"
          class="closebtn"
          >×</span
      >
    <div class="description">
      <h3>Lending</h3>
      <p>
        Description
      </p>
    </div>
  </div>
</div>

Apply css to classes with onclick events

First set the display propert of the divs and all content in them to "inherit.

From that put them all in a container such as a span or div tag then in that span or div add the following code:

onclick="style.display = 'none'"

That will hide everything in that tag that inherits the display property from it.

Update: give the tag that contains all the divs that you want to hide an id such as id = "thing".

Your hide function should look something like:

function hide ()
 {
  document.getElementById("thing").style.display = "none";
 }

then in your html on the item you want to click to make it happen add

onclick="hide()"

Update Numerou Dos: You can use JavaScript's JQuery library to select by class by doing something like:

$(."hider").click(function(){$(".myClass").css("display","none");});

Where myClass is the name of your class and hider is the class of whatever it is your clicking to make it happen. Also if you do it this way (there's a couple others ways to do it using class selectors) remove the onclick function from your hider.

How can i do onclick event with html,css,js

You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.

Eg.

$(".blog-item").on("click", function (e) {
  $(".blog1popup").css("opacity", "100%");
  $(".blog1popup").addClass("any-class");
});

How can I get onclick event to work for changing CSS attributes?

getElementsByTagName returns array instead of a single element.
So you will have to access an element like this getElementsByTagName("body")[0].
Hope this would help.

how to remove a class with the onclick event with javascript

Sorry if I thought your question was a spam attempt. It was not clear you wanted to add a class on a clicked button AND remove that same class on all the other buttons.

So.... Just forget about the inline onclick with multiple functions then. One eventListener can do the job for as many buttons you like.

Just use a data attribute to store the href to open and that event listener will do the rest.

let allBtns = document.querySelectorAll("button")

// For each button, register an event listener
allBtns.forEach(function(elem){

  elem.addEventListener("click", function(e){
  
    // On click, remove the MyClass on ALL buttons
    allBtns.forEach(function(el){
      el.classList.remove("MyClass");
    });
    
    // Add the class on clicked one
    e.target.classList.add("MyClass");
    
    // Now pass the data-href to your iframe
    let theHREFtoOpen = e.target.getAttribute("data-href")
    console.log(theHREFtoOpen)
    //document.querySelector("#your-iframe").src = theHREFtoOpen
  })
})

.MyClass {
    background-color: red;
    color: #00ff1f;
}

<div><button data-href="some href!!">Try it</button></div>
<div><button data-href="some other href!!">forobeta</button></div>
<div><button data-href="and another href!!">femax</button></div>
<button data-href="as you like and so on.">forobeta</button>