Javascript click Listener getting Classes

Question

I am trying to make an easy animation using click eventlistener but i would like to create it getting classes instead of ids. I would like whenever someone click the button to open the box and when it is clicked again to close it. I have tried it with ids and its working but when i use only classes it doesnt. What is the problem?

Thanks. html code:

<div class = "box"></div>
<button class = "btn">Click</button>

css code:

body {
  background:grey;
}

.box{
  width:0px;
  height:0px;
  background:orange;
}

.box.active {
  width:300px;
  height:300px;
  background:orange;
}

javascript code:

var btn = document.getElementsByClassName("btn");
btn.addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box");

    if ( y.className === "active" ){
      y.className = "";
    }else{
      y.className = "active";
    }
}

baao · Accepted Answer · 2016-03-05 16:41:45Z

2

document.getElementsByClassName() returns a htmlCollection which doesn't have a method addEventListener. If you have only one single element, consider to give it an id and use the same code you have, but change all occurences of document.getElementsByClassName() to document.getElementById(), or use

document.getElementsByClassName()[0].addEventListener(...)

If you have multiple elements you want to add an event to, you'll need to loop through them.

ID Example:

<div id="box"></div>
<button id="btn">Click</button>

JS:

var btn = document.getElementById("btn");
btn.addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementById("box");

    if ( y.className === "active" ){
      y.className = "";
    }else{
      y.className = "active";
    }
}

If you want to use it with classes, there are a few things to consider. Like stated above, you'll need to pick an element or loop through all to assign event listeners or change their classes. Also, if your code were working, it would work only once as you're overriding the class if it doesn't have the active class. Below will work for you:

var btn = document.getElementsByClassName("btn");
btn[0].addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box")[0];

    if ( y.classList.contains("active") ){
      y.classList.remove("active");
    }else{
      y.classList.add("active");
    }
}

Or much easier:

var btn = document.getElementsByClassName("btn");
btn[0].addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box")[0];
  y.classList.toggle('acitve');
}

edited Mar 5, 2016 at 16:41

answered Mar 5, 2016 at 16:06

baao

73.6k18 gold badges152 silver badges209 bronze badges

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

3 Comments

NoName84 Over a year ago

Thanks for the answer mmm but the problem is that i want to make it with classes. I have already created it with ids and its working but i was wondering how i could achieve it with classes.

baao Over a year ago

Do you have multiple elements that share a class? @NoName84

NoName84 Over a year ago

no just those 2 but i want to use only classes instead of ids just to see an example of how it can be done so ill be able to use it in future projects. In my projects i am mostly using classes instead of ids that is why i want to learn how to work with classes

Diego Gallegos · Accepted Answer · 2016-03-05 16:22:28Z

There are a few issues.

document.getElementsByClassName returns an array so you have to access the array to add an Event Listener. Something like: btn[0].addEventListener
On the openFunction() again you have to access the returned array by getElementsByClassName.
If className is active you remove all the classes from the object including box class. So when you click again it would not find that element.

Check a demo here for vanilla JS:

var btn = document.getElementsByClassName("btn");
btn[0].addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box");

    if ( y[0].className === "box active" ){
      y[0].className = "box";
    }else{
      y[0].className = "box active";
    }
}

body {
  background:grey;
}

.box{
  width:0px;
  height:0px;
  background:orange;
}

.box.active {
  width:300px;
  height:300px;
  background:orange;
}

<div class = "box"></div>
<button class = "btn">Click</button>

If you want to use Jquery you can try the toggleClass.

toggleClass: This is equivalent to addClass when the class is not present and removeClass when the class is present.

alphapilgrim · Accepted Answer · 2016-03-13 22:47:05Z

-1

Consider the following, much more efficient/cleaner:

var btn = document.getElementsByClassName('btn');
var active = false;
btn[0].addEventListener("click", openFunction, false);

function openFunction() {
  var y = document.getElementsByClassName("box");
  active = !active;
  y[0].className = active ? 'box' : 'box active';
}

Codepen

Link in case anyone is wondering how ternary operator works:

Conditional (ternary) Operator

condition ? expr1 : expr2

Also a good read by Douglas Crockford :

Code Conventions for the JavaScript Programming Language

Also, here is performance test in JsPerf.

edited Mar 13, 2016 at 22:47

answered Mar 5, 2016 at 16:33

alphapilgrim

3,97510 gold badges33 silver badges64 bronze badges

Collectives™ on Stack Overflow

Javascript click Listener getting Classes

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related