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?

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?

• javascript
• jquery

• setAttribute is a DOM node method. You are trying to use it on jQuery obj – 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 pares a string to the number 0, which won't ever be equal so will always log "found". – 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 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 Commented Nov 11, 2014 at 13:01

2 Answers 2

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);

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