how to get a specific button id in an array of images

Question

I am trying to only get the parent button id of an image in the array with the specific src of srcA. Any help is appreciated.

var images = document.getElementById('con').getElementsByTagName('img');
var myImg = [];
for (var i = 0; i < images.length; i++) {
  if (images[i].src == "srcA")
    myImg.push(images[i]);
  alert(images[i].parent.id);
}

<div id="con">
  <button id="ba"><img id="sa" src="srcA"></button>
  <button id="bb"><img id="sb" src="srcB"></button>
  <button id="bc"><img id="sc" src="srcC"></button>
  <button id="bd"><img id="sd" src="srcD"></button>
  <button id="be"><img id="se" src="srcE"></button>
  <button id="bf"><img id="sf" src="srcF"></button>
</div>

I get an error images[i].parent is undefined

No jQuery please.

@Scrimothy parentNode does return the id. thanks for that but it still returns the whole array instead of just the specific source. Im trying to get one id back for the button wrapping the specific image source. — Jonny, May 06 '19 at 23:59
Possible duplicate of [Getting the parent div of element](https://stackoverflow.com/questions/6856871/getting-the-parent-div-of-element) — Heretic Monkey, May 07 '19 at 00:04
@HereticMonkey The alert issue is kind of secondary, the main problem is the `if` not wrapping both commands and `.src` yielding the full URL. So not a duplicate imo. — , May 07 '19 at 00:07
@ChrisG Certainly you're aware of how we deal with proposed duplicates? [Edit] the question to show how the duplicate is different, or better (in this case) close as a duplicate of a different question (e.g., [Javascript image src attribute returns wrong value](https://stackoverflow.com/q/27201078/215552)) or as a typo. — Heretic Monkey, May 07 '19 at 00:20

score 0 · Answer 1 · answered May 06 '19 at 23:55

0

I'm pretty sure you can just use:

var imgSRCAParent = document.querySelector("img[src='srcA']").parentElement;

I checked it out and it works.

Hope this helps!!!

answered May 06 '19 at 23:55

Da Mahdi03

1,468
1
9
18

score 0 · Answer 2 · edited May 07 '19 at 00:05

0

You must combine querySelector and attributes from parent.

function findParent (source) {
  return document.querySelector("#con button img[src="+source+"]").parentElement.id;
}

using like this:

findParent("srcA"); // its return "ba"

edited May 07 '19 at 00:05

Alex McMillan

17,096
12
55
88

answered May 07 '19 at 00:01

Olaf Erlandsen

5,817
9
41
73

John · Answer 3 · 2019-05-07T00:14:22.537

0

Two errors

If statement is missing curly brace
src is relative URL so you need to add it to the check

Of course, adding static URL check like that is a bad idea, so either use a getAttribute as mentioned in the comments or do a / split

var images = document.getElementById('con').getElementsByTagName('img');
var myImg = [];
for(var i = 0; i < images.length; i++){
if(images[i].src === "https://stacksnippets.net/srcA"){
  myImg.push(images[i]);
  alert(images[i].id);
 }
}

<div id="con">
<button id="ba"><img id="sa" src="srcA"></button>
<button id="bb"><img id="sb" src="srcB"></button>
<button id="bc"><img id="sc" src="srcC"></button>
<button id="bd"><img id="sd" src="srcD"></button>
<button id="be"><img id="se" src="srcE"></button>
<button id="bf"><img id="sf" src="srcF"></button>
</div>

edited May 07 '19 at 00:14

answered May 07 '19 at 00:03

John

1,489
9
17

3

Or use `images[i].getAttribute("src") == "srcA"`, but otherwise is this the only answer that properly addresses the issues with the question's code. – May 07 '19 at 00:05
This is very close i figured it out add @Chris G's images[i].getAttribute("src") == instead of images[i].src === and alert(images[i].parentNode.id) to the alert and Ill mark it correct. Chris G was right this answer is closest to the problem. Thank you all for your help. – Jonny May 07 '19 at 00:31

score 0 · Answer 4 · answered May 07 '19 at 00:09

You're assuming that value of src in Javascript is the same was the string you put into the src attribute in the HTML. Javascript has already expanded it out to a fully recognizable URL complete with protocol and domain. You have to separate the src so that you can grab just the last portion that you put in there. Then evaluate against the path you targeted.

This was a good place for a simple console.log() debugging.

var images = document.getElementById('con').getElementsByTagName('img');
var myImg = [];
for(var i = 0; i < images.length; i++){
  const path = images[i].src.split('/');
  const lastStop = path[path.length - 1];
  if(lastStop == "srcA") {
    myImg.push(images[i]);
    alert(images[i].parentNode.id);
  }
}

<div id="con">
<button id="ba"><img id="sa" src="srcA"></button>
<button id="bb"><img id="sb" src="srcB"></button>
<button id="bc"><img id="sc" src="srcC"></button>
<button id="bd"><img id="sd" src="srcD"></button>
<button id="be"><img id="se" src="srcE"></button>
<button id="bf"><img id="sf" src="srcF"></button>
</div>

Jonny · Accepted Answer · 2019-05-09T03:20:20.577

0

var images = document.getElementById('con').getElementsByTagName('img');
var myImg = [];
for(var i = 0; i < images.length; i++){
if(images[i].getAttribute("src") == "srcA"){
  myImg.push(images[i]);
  alert(images[i].parentNode.id);
 }
}

<div id="con">
<button id="ba"><img id="sa" src="srcA"></button>
<button id="bb"><img id="sb" src="srcB"></button>
<button id="bc"><img id="sc" src="srcC"></button>
<button id="bd"><img id="sd" src="srcD"></button>
<button id="be"><img id="se" src="srcE"></button>
<button id="bf"><img id="sf" src="srcF"></button>
</div>

edited May 09 '19 at 03:20

answered May 09 '19 at 03:14

Jonny

1,319
1
14
26

I figured it out with the help of John and Chris G. Thank you. – Jonny May 09 '19 at 03:15

how to get a specific button id in an array of images

5 Answers5