How to get text inside of a class when a button is clicked

Question

I would like to get a text inside of a class "move" when its button is clicked, but I could not get teh text well. Is there something wrong in my code?? I want to pass the text to a function "move".

for(var i=0; i<4; i++){
    document.querySelectorAll("#my-card .moves button")[i].onclick = function(){ 
        move(document.querySelectorAll("#my-card .moves .move")[i].textContent, gameID, playerID) };
}

Part of my HTML;

<div id="my-card">
    <div class="hidden buffs"></div>

    <div class="card-container">

      <div class="card">
        <img src="icons/normal.jpg" alt="type" class="type"/>
        <span class="hp">60HP</span>
        <h2 class="name">Pokemon Name</h2>
        <div class="pokemon-pic">
          <img src="images/pokeball.png" alt="pokemon" class="pokepic" />
        </div>
        <p class="info">Description here</p>
        <div class="moves">
          <button>
            <span class="move">a</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">b</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">c</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">d</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
        </div>
        <img src="icons/fighting.jpg" alt="weakness" class="weakness" />
      </div>

The HTML code is provided, and so I cannot modify the code... — Andy Anderson, May 11 '17 at 01:09

score 0 · Answer 1 · answered May 10 '17 at 22:36

You could store the move as data in the button, then on click retrieve the move from the dataset.

for (var i = 0; i < 4; i++) {
  document.querySelectorAll("#my-card .moves button")[i].onclick = function(el) {
    console.log(el.currentTarget.dataset.move);
  }
}

<div id="my-card">
  <div class="hidden buffs"></div>

  <div class="card-container">

    <div class="card">
      <img src="icons/normal.jpg" alt="type" class="type" />
      <span class="hp">60HP</span>
      <h2 class="name">Pokemon Name</h2>
      <div class="pokemon-pic">
        <img src="images/pokeball.png" alt="pokemon" class="pokepic" />
      </div>
      <p class="info">Description here</p>
      <div class="moves">
        <button data-move="a">
            <span class="move">a</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
        <button data-move="b">
            <span class="move">b</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
        <button data-move="c">
            <span class="move">c</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
        <button data-move="d"> 
            <span class="move">d</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
      </div>
      <img src="icons/fighting.jpg" alt="weakness" class="weakness" />
    </div>

Sorry, the html is provided and so I cannot modify the HTML code... — Andy Anderson, May 11 '17 at 01:06

How to get text inside of a class when a button is clicked

1 Answers1