JavaScriptからクラス/ IDを持たない画像のsrcを変更する方法

Question

imgのソースをJavaScriptからAjaxを使用して変更したいと思います。 imgタグにIDやクラスがないため、imgの選択方法とsrcの変更方法を理解できません。どうやってやるの？私はHTML（提供されているので変更できません）とJavaScriptの一部を入れています。ありがとう。

HTML：

<div class="moves"> 
      <button> 
      <span class="move">Move Name Here</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
      <button> 
      <span class="move">Move Name Here</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
      <button> 
      <span class="move">Move Name Here</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
      <button> 
      <span class="move">Move Name Here</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
</div> 

Javascriptを：

 var moveArr = data.moves; 
     var moves = document.getElementsByClassName("move"); 
     for(var x=0; x < data.moves.length; x++){ 
      moves[x].innerHTML = moveArr[x].name; 
      img[x].src = "icons\/" + moveArr[x].type + ".jpg"; // I cannot write this part correctly. 
     } 

Answer 1

うん、あなたはのSRCを変更しようとしている画像への参照を持っていません。私はそうするでしょう：

var moveArr = data.moves; 
var moves = document.getElementsByClassName("move"); 
for(var x=0; x < data.moves.length; x++){ 
    moves[x].innerHTML = moveArr[x].name; 
    var img = moves[x].parentNode.getElementsByTagName('img')[0]; 
    img.src = "icons\/" + moveArr[x].type + ".jpg"; 
} 

あなたのページのレイアウトが変更された場合、このコードを変更する必要があります。あなたが今持っているもののために働かなければならない。

Answer 2

各spanはimgで成功した（あなたが投稿したコードからのように見えるように）そう.move項目や画像の同じ数がありますされている場合は - そして、彼らは一致 - あなたはDOM images collectionを使用することができます次のように各画像のsrcをターゲットに設定します。

var moveArr = data.moves; 
    var moves = document.getElementsByClassName("move"); 
    for(var x = 0; x < data.moves.length; x++){ 
     moves[x].innerHTML = moveArr[x].name; 
     document.images[x].src = "icons\/" + moveArr[x].type + ".jpg"; 
    }