Javascript: can't apply event listener to class?

Question

i'm having problems applying an event listener to a class. If i try using ID, it works, but if i try with class, nothing happens. I have four div's, all exactly equal. I want to change the one i click, but keeping the other three without change. Is it possible?

HTML

<div class="card">
    - 6 pièces, dont 3 aveugles.
    - Cuisine - électroménagers intégrés.
    - 2 salles de bains modernes.
</div>
<div id="ui" class="card">
    - 6 pièces, dont 3 aveugles.
    - Cuisine - électroménagers intégrés.
    - 2 salles de bains modernes.
</div>
<div class="card">
    - 6 pièces, dont 3 aveugles.
    - Cuisine - électroménagers intégrés.
    - 2 salles de bains modernes.
</div>
<div class="card">
    - 6 pièces, dont 3 aveugles.
    - Cuisine - électroménagers intégrés.
    - 2 salles de bains modernes.
</div>

CSS

.card {
   height: 100px;
   width: 245px;
   float: left;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   font-size: 0.85em;
   line-height: 1.5em;
   margin: 15px;
   overflow: hidden;
   border-radius: 5px;
  }

.expandCard {
  height:500px;
  width: 245px;
  float: left;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  font-size: 0.85em;
  line-height: 1.5em;
  margin: 15px;
  border-radius: 5px;
}

JS this doesn't work

var teste = document.getElementsByClassName("card");
teste.addEventListener("click", function changeSize() {
   teste.className = "expandCard";
});

this works for the element with the ID("ui")

var teste = document.getElementByID("ui");

teste.addEventListener("click", function changeSize() {
   teste.className = "expandCard";
});

`getElementsByClassName` returns a node list, not an individual node. — Daniel A. White, Apr 13 '17 at 15:31
You need to learn what an element is and how class and id are just ways to locate elements. — Quentin, Apr 13 '17 at 15:31

score 1 · Accepted Answer · answered Apr 13 '17 at 15:34

1

getElementsByClassName returns an array-like object. You can use Array.from method to change it into an array. Then, use Array#forEach to bind the event listener to every element.

var teste = document.getElementsByClassName("card");

Array.from(teste).forEach(v => v.addEventListener("click", function() {
  this.classList.toggle('expandCard');
}));

.card {
  height: 100px;
  width: 245px;
  float: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  font-size: 0.85em;
  line-height: 1.5em;
  margin: 15px;
  overflow: hidden;
  border-radius: 5px;
}

.expandCard {
  height: 500px;
  width: 245px;
  float: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  font-size: 0.85em;
  line-height: 1.5em;
  margin: 15px;
  border-radius: 5px;
}

<div class="card">
  - 6 pièces, dont 3 aveugles. - Cuisine - électroménagers intégrés. - 2 salles de bains modernes.
</div>
<div id="ui" class="card">
  - 6 pièces, dont 3 aveugles. - Cuisine - électroménagers intégrés. - 2 salles de bains modernes.
</div>
<div class="card">
  - 6 pièces, dont 3 aveugles. - Cuisine - électroménagers intégrés. - 2 salles de bains modernes.
</div>
<div class="card">
  - 6 pièces, dont 3 aveugles. - Cuisine - électroménagers intégrés. - 2 salles de bains modernes.
</div>

answered Apr 13 '17 at 15:34

kind user

40,029
7
67
77

although your solution worked, didn't understand it all. So went digging a better way so i could understand what i was doing. Here is my solution. `for(var i = 0; i <= teste.length; i++) { teste[i].addEventListener("click", function() { this.classList.toggle("expandCard"); }); }` – fields Apr 13 '17 at 22:53
@fields `Array#forEach` works simillar as `for` loop does. Just look in docs, it's pretty simple https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach – kind user Apr 13 '17 at 22:56
yes, i know. But then i found this :) (https://coderwall.com/p/kvzbpa/don-t-use-array-foreach-use-for-instead) – fields Apr 13 '17 at 22:57
@fields Don't trust everything you see in the internet :P – kind user Apr 13 '17 at 23:00
1

yes, i know that :) but it helped me decide witch version to choose. But the Array#forEach was something new for me. Many thanks for introducing it to me – fields Apr 13 '17 at 23:05

Javascript: can't apply event listener to class?

1 Answers1