0

Problem: Whenever I click on a card, the onClickCard() function runs with element = null. Why is element = null while I clearly set element = cards.item(i) in the callback function for cards.item(i).addEventListener.

The function onClickCard works correctly when I manually pass in the variable in console using the Ctrl-Shift-I on chrome. 

cards = document.getElementsByClassName("card");
activeCard = 1;
visitedCards = [];

for (i = 0; i < cards.length; i++) {
  cards.item(i).addEventListener("click", function() {
    console.log(cards.item(i));
  });
}

function onClickCard(element) {

  console.log(element);
  console.log(element.getAttribute("value"));
}
<div class="card scale-up-center" value="1">
  <span>Chat 1</span>
  <span class="dot"></span>
  <p> Minecraft Players</p>
  <span class="players"><b>10</b></span>
</div>

<div class="card scale-up-center" value="2">
  <span>Chat 2</span>
  <span class="dot"></span>
  <p> Progamming Java</p>
  <span class="players"><b>36</b></span>
</div>

<div class="card scale-up-center" value="3">
  <span>Chat 3</span>
  <span class="dot"></span>
  <p> HTML/CSS </p>
  <span class="players"><b>12</b></span>
</div>

<div class="card scale-up-center" value="4">
  <span>Chat 4</span>
  <span class="dot"></span>
  <p> Contact/Help</p>
  <span class="players"><b>23</b></span>
</div>
Alexandre Elshobokshy
  • 10,720
  • 6
  • 27
  • 57
mathewbrown
  • 11
  • 1
  • 2
    You never call/use `onClickCard` anywhere in the code you posted? – Bergi Jun 11 '20 at 13:20
  • `cards[i]` can/should be used instead of `cards.item(i)` The `item()` interface was added to help when using languages without support for indexed properties. – Heretic Monkey Jun 11 '20 at 13:22

0 Answers0