0

I'm trying to check all input boxes if there is an image tag next to it that contains a certain image location in it's src.

var productThumb = document.getElementsByTagName("img").src;
var inputs = document.getElementsByTagName("input");
for (var i = 0, max = inputs.length; i < max; i++) {
    imgSrc = productThumb[i];
    if (inputs[i].type === 'checkbox' && imgSrc.indexOf("/img/folder/1/") === 0 )
        inputs[i].checked = true;
}

When I run this code I get the error in the title. What is wrong? I'm new to javascript so I have no idea what I am doing wrong but I think it has to be something with var = productThumb and imgSrc = productThumb[i]. What is the correct way of declaring the variables?

some random dude
  • 457
  • 1
  • 4
  • 11
  • You have to put all the image references into an Array if you want to be able to access them by index position. – Korgrue Feb 05 '16 at 23:19
  • Your title is missing the name of the property it cannot read, which is probably quite important. Care to update? – Robert Rossmann Feb 05 '16 at 23:19
  • 1
    This is practically a duplicate of [What does `getElementsByClassName` return?](http://stackoverflow.com/questions/10693845/what-does-getelementsbyclassname-return). – Sebastian Simon Feb 05 '16 at 23:23
  • @Robert Rossmann Sorry, I've updated the title. – some random dude Feb 05 '16 at 23:27
  • If the error says the engine cannot read some property of `undefined`, it means, contrary to your expectations, that you are getting `undefined` where you would expect an object. I would go ahead and double-check the return value. In your example, it looks like this is the offending code: `document.getElementsByTagName("img")`. – Robert Rossmann Feb 05 '16 at 23:30
  • Why do you think `getElementsByTagName("img")` would return something different than `document.getElementsByTagName("input")`. You are treating one as an array and one as a DOM element. – Felix Kling Feb 05 '16 at 23:30
  • Btw, this code cannot produce the error you mentioned. – Felix Kling Feb 05 '16 at 23:32

4 Answers4

1

getElementsByTagName returns an array-like structure (an HTMLCollection). Thus, productThumb is undefined because there's no src property in an HTMLCollection.

Simply remove .src from line 1 in your example, and add it at the end of line 4, and you should be good to go.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Hatchet
  • 5,320
  • 1
  • 30
  • 42
  • I've tried this prior to posting this question. I get a similar error: Uncaught TypeError: Cannot read property 'src' of undefined(…) – some random dude Feb 05 '16 at 23:28
  • I can't replicate your exact problem without more code; as far as I can tell, the code works properly as per this JSFiddle: https://jsfiddle.net/Hatchet/a64umcbr/ – Hatchet Feb 05 '16 at 23:32
  • I added alert and console log code to see if the code is actually looping through the img tag and it appears to do it. It get's undefined after the last img for some reason. I will do some more debugging. Thanks though! – some random dude Feb 06 '16 at 00:13
1

Your code should be like this: 

var productThumb = document.getElementsByTagName("img");
var inputs = document.getElementsByTagName("input");
for (var i = 0, max = inputs.length; i < max; i++) {
    imgSrc = productThumb[i].src;
    if (inputs[i].type === 'checkbox' && imgSrc.indexOf("/img/folder/1/") === 0 )
        inputs[i].checked = true;
}

This is because, in line 1, getElementsByTagName returns an array of img elements. And hence, getting src from an array of elements doesn't make sense.

Sasank Mukkamala
  • 1,504
  • 13
  • 22
0

I think the proper solution would be to simply add [0] in front of .src this will choose which img within the collection to reference.

Example.

var productThumb = document.getElementsByTagName("img")[0].src;
Christose
  • 1
0

Alternatively, jQuery provides a simple solution.

This 

var productThumb = document.getElementsByTagName("img").src;

var inputs = document.getElementsByTagName("input");

Would become this

$productThumb = $('#PARENTid').find('img')[0].src;
$inputs = $('#PARENTid').find('input')[0].src;

Now for additional compatibility, if multiple libraries in use( which they likely are )

jQuery(function($){                                                      
$productThumb = $('#PARENTid').find('img')[0].src;
$inputs = $('#PARENTid').find('input')[0].src;                                     
});
Christose
  • 1