Javascript, Click eventlistener doing the same thing with multiple classes

Question

I'm very new to learning JavaScript, and I've tried to read, and look for similar answers, but everything is pointing at jQuery, which I want to avoid using for this problem. I can't quite work out what is jQuery and what still works in JS...

I have set up a function that can grab the innerHTML but I can't seem to assign it to the same classes, else it'll only work on the first instance, and I tried creating multiple classes but essentially they're all the same button with different values...

document.querySelector(".b1").addEventListener("click", writeDisp);
document.querySelector(".b2").addEventListener("click", writeDisp);
document.querySelector(".b3").addEventListener("click", writeDisp);
document.querySelector(".b4").addEventListener("click", writeDisp);

function writeDisp() {
  if(dispNum.length < 9){
    if(dispNum === "0") {
      dispNum = this.innerHTML
    } else {
      dispNum = dispNum + this.innerHTML};
      document.querySelector(".display").textContent = dispNum;
    }
  }
}

How can I make this more simple. As there are way more .b* classes to add, and I'd rather not have a massive list if possible.

Thanks,

post a snipped of your html. If all of the b classes are children of an element, you can use jQuery's even propagation with .on() — VtoCorleone
– VtoCorleone, Commented Dec 4, 2017 at 5:30
You can use code snippet to post all html and script. see - meta.stackoverflow.com/a/358213/1516712 — seokgyu
– seokgyu, Commented Dec 4, 2017 at 5:33
document.querySelector(".b1") returns a single element. You need document.querySelectorAll, and then iterate through the returned collection to add the event listeners, or use event delegation, if possible. — Teemu
– Teemu, Commented Dec 4, 2017 at 5:41

A.D. · Accepted Answer · 2017-12-04 06:03:42Z

1

var class_elem = document.querySelectorAll("button[class^='b']");

function writeDisp(){
  if(dispNum.length < 9){
    if(dispNum === "0"){dispNum = this.innerHTML}else{dispNum = dispNum + this.innerHTML};
    document.querySelector(".display").textContent = dispNum;
  }
}

for (var i = 0; i < class_elem.length; i++) {
    class_elem[i].addEventListener('click', writeDisp, false);
}

//Here your code in javascript only.

answered Dec 4, 2017 at 6:03

A.D.

2,3722 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SALEH · Accepted Answer · 2017-12-04 06:19:51Z

If you don't want to use jquery, you can use native document.querySelectorAll API like this

function writeDisp(){
  if(dispNum.length < 9){
    if(dispNum === "0"){
        dispNum = this.innerHTML
    } else {
        dispNum = dispNum + this.innerHTML
    }
    document.querySelector(".display").textContent = dispNum;
  }
}

// this line will select all html tags that contains a class 
// name starting with 'b'
var doms = document.querySelectorAll("[class^=b]");

doms.forEach(function(dom) {
  dom.addEventListener('click', writeDisp);
})

Note

querySelectorAll will fetch only those DOM instance in which b* is defined as first class, so in case of multiple class defintion, it will not fetch those DOMs which don't have the desired classname at first. That means if you have a DOM defintion like <div class="a box"></div>, this will be ignored, as here, classname starting with b sits after a class.

Collectives™ on Stack Overflow

Javascript, Click eventlistener doing the same thing with multiple classes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related