jQuery Cannot read property 'setAttribute' of undefined

Question

I've implemented an image switch in my website. It worked fine but I broke it by altering to my wishes. The code was as following:

if (src) { $$('#' + id + ' a.product-image img').first().setAttribute("src", src);}

And i've changed it to:

if (src) { $$('#' + id + ' a.product-image img').first().setAttribute("src", src); 
           $$('#' + id + ' a.popup-image img').first().setAttribute("src", src); 
         }

I simply added a image source that need to be changed. But when I run it on my site I get the following error:

Uncaught TypeError: Cannot read property 'setAttribute' of undefined

I've checked if the element exists and if it could by found by adding the following code to my script:

if('#' + id + 'popup-image' == 0){
    console.log("fail");
}else{
    console.log("found");
}

And it returns found everytime. I've changed my code to this:

$$('#' + id + ' a.popup-image img').first().setAttribute("src", src);

But then I get the following error:

Uncaught TypeError: Cannot read property 'first' of null

How do I fix this?

setAttribute is a DOM node method. You are trying to use it on jQuery obj — A. Wolff
– A. Wolff, Commented Nov 11, 2014 at 12:50
What is the $$ function? Note that if('#' + id + 'popup-image' == 0){ does not check if the element exists, it compares a string to the number 0, which won't ever be equal so will always log "found". — nnnnnn
– nnnnnn, Commented Nov 11, 2014 at 12:52
@nnnnnn I always use this method to only display something if an element exist. And it always works correctly — user3164891
– user3164891, Commented Nov 11, 2014 at 12:53
No it doesn't. Read my explanation of why it doesn't work again. Think about how evaluating a string could possibly check whether a DOM element exists (it can't). You can easily test this by changing the 'popup-image' part of that if to 'blah' - it'll still log "found". You have to pass that string to a function that looks for the DOM element (e.g., to the $$() function, whatever it is). — nnnnnn
– nnnnnn, Commented Nov 11, 2014 at 13:01

Jake · Accepted Answer · 2016-11-04 19:34:20Z

3

If you want to use the JavaScript setAttribute() function, you have to access the HTMLElement within your jQuery object by referencing the first item of its array, [0], like so:

 $('#' + id + ' a.product-image img')[0].setAttribute("src", src);

Calling first() will return a jQuery object; with this approach you have to use attr() , as there is no setAttribute() method in jQuery.

Try:

 $('#' + id + ' a.product-image img').eq(0).attr("src", src);

or:

$('#' + id + ' a.product-image img:first').attr("src", src);

or you can use get() which takes an index argument, and passing 0 will return first element:

$('#' + id + ' a.product-image img').get(0).attr("src", src);

edited Nov 4, 2016 at 19:34

Jake

4,8992 gold badges36 silver badges46 bronze badges

answered Nov 11, 2014 at 12:49

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ehsan Sajjad Over a year ago

it means first() returned null (no element)

nnnnnn Over a year ago

The jQuery method first() won't ever return null. (It can return an empty jQuery object.)

Ehsan Sajjad Over a year ago

i mean to say that no element found so it is undefined

nnnnnn Over a year ago

jQuery's first() won't return undefined either. Also, .get(0) returns a DOM element not a jQuery object, so you can't chain .attr() after .get(). (.get(0) will return undefined if there was no matching element.)

Ehsan Sajjad · Accepted Answer · 2014-11-12 04:26:12Z

1

To check if an element exists you should've used the code:

if($$('#' + id + 'popup-image').length > 0){
    console.log("found");
}else{
    console.log("fail");
}

To set the attribute you should

if (src) { $$('#' + id + ' a.product-image img').first().attr("src", src);
           $$('#' + id + ' a.popup-image img').first().attr("src", src); 
         }

edited Nov 12, 2014 at 4:26

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

answered Nov 11, 2014 at 13:01

Artur Adams

687 bronze badges

Collectives™ on Stack Overflow

jQuery Cannot read property 'setAttribute' of undefined

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related