no repeat in javascript

Question

Hello i am new in javascript so sorry for the elementary question, so i want to make the same action to many button it is easy i want to make buttons actives when i click on it so there is my code:

var button = document.querySelector(".button_cadre_work");
 
   button.addEventListener("click", function(e) {
      this.classList.toggle("is-active"); 
  });
  
  var button = document.querySelector(".over_btn");
 
   button.addEventListener("click", function(e) {
      this.classList.toggle("is-active"); 
  });
  
  var button = document.querySelector(".button_cadre_about");
 
   button.addEventListener("click", function(e) {
      this.classList.toggle("is-active"); 
  });

How can i optimize it for don t repeat evrytime

[Looping through querySelectorAll()](http://stackoverflow.com/questions/12330086/how-to-loop-through-selected-elements-with-document-queryselectorall) — Ja͢ck, May 25 '15 at 04:24

score 1 · Accepted Answer · answered May 25 '15 at 04:16

1

var buttons = document.querySelectorAll('.button_cadre_work, .over_btn, .button_cadre_about');
var buttonClickHandler = function(e) {
  this.classList.toggle("is-active"); 
};
// EITHER
Array.prototype.forEach.call(buttons, function(button) {
  button.addEventListener('click', buttonClickHandler);
});
// OR
for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  button.addEventListener('click', buttonClickHandler);
}

answered May 25 '15 at 04:16

Amadan

191,408
23
240
301

thank you :) and just an other little question, if i want to get the active class of a button when i click on an other one ? is it possible ? like "if i click on "over_btn" i active "button_cadre_work" – Thibaud May 25 '15 at 04:19
Sorry, not sure what you mean. And also, unless your question is a clarification of this answer or tightly related to it, you should make a new question. – Amadan May 25 '15 at 04:21
@tib if your buttons don't all do exactly the same, you're looking for something else. – Ja͢ck May 25 '15 at 04:24

score 1 · Answer 2 · answered May 25 '15 at 04:20

var buttonClickHandler = function(e) {
  this.classList.toggle("is-active"); 
};
NodeList.prototype.forEach = Array.prototype.forEach; //this will allow you to do this in other similar situations
var buttons = document.querySelectorAll('.button_cadre_work, .over_btn, .button_cadre_about').forEach(function(el) {
  el.addEventListener('click', buttonClickHandler);
})

score 1 · Answer 3 · answered May 25 '15 at 04:28

You could put the same class on all your elements and the loop through them. I'm using a while loop instead of the array forEach loop.

function loops(items, fn, onLoopComplete) {
  var i;
  try {
    if (items && items.length) {
      i = items.length;
    } else {
      throw new Error(items + ' is required to have a length');
    }

    if (i > -1) {
      do {
        if (items[i] !== undefined) {
          fn(i);
          /* console.log(i + ' is the current iteration'); */
        }
      }
      while (--i >= 0);
    }
    if (typeof onLoopComplete === 'function') {
      onLoopComplete(items.length);
    }
  } catch (e) {
    throw new Error(e);
  }
}

var button = document.querySelectorAll(".buttons");

loops(button, function(i) {
  button[i].addEventListener("click", function(e) {
    alert(button[i].className);
    button[i].classList.toggle("is-active");
  });
});

<li class="buttons button_cadre_work">one</li>
<li class="buttons over_btn">two</li>
<li class="buttons button_cadre_about">three</li>

no repeat in javascript

3 Answers3