如何从JavaScript更改没有类/ ID的图像的src

Question

I would like to change the source of the img from JavaScript by using Ajax. And img tag does not have any IDs or classes, and I cannot figure out how to select the img and how to change the src . How can I do that? I put part of my HTML (it is provided, and so I cannot modify) and part of my JavaScript. Thanks.

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

Yeah, you don't have a reference to the image that you are trying to change the src of. I would do:

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";
}

If the layout of your page changes you might have to alter this code. Should work for what you have now, though.

Answer 2

If each span is succeeded by an img (as it appears to be from the code you've posted) so there's the same number of .move items and images -- and they match up -- then you can use the DOM images collection to target each image's src , like so:

    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";
    }