Javascript on Click Event for Multiple Buttons With Same Class

Javascript on click event for multiple buttons with same class

If you plan to have multiple other classes like button--3, …4 … …15,

You must want to target all div elements which class starts (^=) with "button":

(Note that you can do it in the CSS too!)

var allButtons = document.querySelectorAll('div[class^=button]');console.log("Found", allButtons.length, "div which class starts with “button”.");
for (var i = 0; i < allButtons.length; i++) {  allButtons[i].addEventListener('click', function() {    console.clear();    console.log("You clicked:", this.innerHTML);  });}

/* Some styling */
section {  margin: 8px 0;  border: 1px solid gray;}
section div {  border: 1px solid lightgray;  display: inline-block;  margin-left: 8px;  padding: 4px 8px;  width: 30px;}
section div[class^=button] {  background: lightgray;  cursor: pointer;}

<span>You can click on the buttons:</span><section>  <div class="button--1">s1-1</div>  <div class="button--2">s1-2</div>  <div class="button--3">s1-3</div>  <div class="button--4">s1-4</div></section><section>  <div class="button--1">s2-1</div>  <div class="button--2">s2-2</div>  <div class="button--3">s2-3</div>  <div class="button--4">s2-4</div></section><section>  <div class="not-a-button">not1</div>  <div class="not-a-button">not2</div>  <div class="not-a-button">not3</div>  <div class="not-a-button">not4</div></section>

Multiple buttons with same class in jQuery

By using Jquery's .first() function, you can get the first element and then only bind the click event to it.

$(".sameClass").first().on("click", function() { console.log("clicked"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button class="sameClass">Button 1</button><button class="sameClass">Button 2</button><button class="sameClass">Button 3</button>

Using the same function to change multiple buttons text for onclick event

Pass the element as an argument to the function, using this.

function myFunction(element) {
  let span = element.querySelector("span");
  span.innerHTML = "Copied";
  setTimeout(function() {
    span.innerHTML = "Find Out More";
  }, 1000);
}

.Big {
  width: 257px;
  padding: 33px 0 30px 0;
  font-size: 21px;
}

button {
  font-family: 'Montserrat';
  font-weight: 500;
  border-radius: 6px;
  margin-bottom: 3px;
}

.ButtonMain {
  background-color: #e6e6e6;
  position: relative;
  overflow: hidden;
  border: none;
}

.ButtonMain::before,
.ButtonMain::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ButtonMain span {
  position: relative;
  color: #fff;
}

.ButtonMain:hover span {
  color: #000;
  transition: color 0.3s ease 0s;
}

.BlueRevealEffect::before {
  content: '';
  background: #3a86ff;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.BlueRevealEffect:hover::before {
  transform: translate3d(100%, 0, 0);
}

<button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction(this)">
  <span>Find Out More</span>
</button>
<button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction(this)">
  <span>Find Out More</span>
</button>
<button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction(this)">
  <span>Find Out More</span>
</button>
<button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction(this)">
  <span>Find Out More</span>
</button>

Multiple buttons with same class don't work

i think the problem is that the wordbtn buttons still doesn't exists when you are running the code

$(".wordbtn").click(function(){
    console.log('clicked')
})

so the click event is not assigned to any element in your page.

try replace the click event for your button with:

$(document).on("click", ".wordbtn", function(event){
    console.log('clicked');
});

now the click event will fired even with a new added button, this because the event is handled by the a present document element after it bubbles to there.

Onclick event for multiple buttons

var f = function(){
    // do something
}
var elems = document.getElementsByClassName("section_title");
for (var i=0, len=elems.length; i < len; i++) elems[i].onclick = f;

Or for broader compatibility, use .querySelectorAll(), which takes a CSS type of selector.

var f = function(){
    // do something
}
var elems = document.querySelectorAll(".section_title");
for (var i=0, len=elems.length; i < len; i++) elems[i].onclick = f;

Javascript on Click Event for Multiple Buttons With Same Class