如何使用类获取跨度内的文本。 （for循环内部）

Question

我想在具有move 类的跨度内获取文本。所以我试图让当你点击按钮时，它在类移动中的文本作为参数之一传递给函数move。 p.s.给出了 HTML 代码，我无法对其进行任何更改。我的js代码有问题吗？错误消息显示“Uncaught TypeError: Cannot read property 'innerHTML' of undefined”。

部分 HTML 代码；

 <div id="my-card">


    <div class="card-container">
      <div class="card">
        <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>
    </div>
  </div>

Javascript：

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

Answer 1

试试这个

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

我将您的 document.querySelectorAll 切换为 this.querySelectorAll。

下面是一个向控制台显示结果的 sn-p。

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

    console.log(this.querySelectorAll(".move")[0].innerHTML)

  }
}

<div id="my-card">


  <div class="card-container">
    <div class="card">
      <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>
  </div>
</div>