Can you have change the src of an image to a variable in Javascript?

Question

Well, I'm pretty sure you can, except my code is failing now.

What I'm telling my short little Javascript program to do is, pick a code from an array (I have the test one, 0, preset in, for now), and use that code to get the Youtube thumbnail for that video code, to make a semi-automatic Youtube gallery, meaning I don't have to go in, and do all the tedious work manually, just go to the video and copy the code into the array, but, when I try to change the src of the image to the url (variable) through document.getelementblahblah.src=myVar,
I get the console error: Uncaught TypeError: Cannot set property 'src' of null

Here is my code:

<!Doctype HTML>
<html>
<head>
<script>
var thumbPrefix = "http://img.youtube.com/vi/";
var thumbSuffix = "/mqdefault.jpg";
var vidCode = ['fL01KMMi5_M','6akcfoJ05Aw','lPpot4OCnQs'];
var thumb1Url = thumbPrefix + vidCode[0] + thumbSuffix;
document.write(thumb1Url); //this is just to visualize url
document.getElementById('pie').src=thumb1Url;
</script>
</head>
<body>
<img src="" id="pie" />
</body>
</html>

And, I've also tried the setAttribute method, so...

move script code to either in load event or move to the end of body ... — Ashish Kasma
– Ashish Kasma, Commented Oct 30, 2012 at 6:37

nnnnnn · Accepted Answer · 2012-10-30 06:34:10Z

3

"I get the console error: Uncaught TypeError: Cannot set property 'src' of null"

That's because document.getElementById('pie') has returned null because it didn't find an element with the id 'pie', because your script is running before the browser has parsed the element in question.

The browser runs code in script blocks as it encounters them - top to bottom within the document.

Move the script block to the end of the document (e.g., just before the closing </body> tag) or put the code inside a function called onload. That way your image element will have been parsed and can be manipulated from JS.

(The fact that you are trying to set .src to a variable is not a problem at all.)

answered Oct 30, 2012 at 6:34

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

1 Comment

user1760745 Over a year ago

Oh!!! I can't believe I missed that. I've made that mistake too many times. Thank you so much.

Daedalus · Accepted Answer · 2012-10-30 06:35:31Z

0

Your script is failing because it's in the head of the document, and is executed before the content is loaded. Put it in the body, like this, and it works fine.

<body>

    <img src="" id="pie" />
    <script>
        var thumbPrefix = "http://img.youtube.com/vi/";
        var thumbSuffix = "/mqdefault.jpg";
        var vidCode = ['fL01KMMi5_M','6akcfoJ05Aw','lPpot4OCnQs'];
        var thumb1Url = thumbPrefix + vidCode[0] + thumbSuffix;
        document.write(thumb1Url); //this is just to visualize url
        document.getElementById('pie').src=thumb1Url;
    </script>
</body>

answered Oct 30, 2012 at 6:35

Daedalus

7,7125 gold badges40 silver badges64 bronze badges

Comments

Clark Pan · Accepted Answer · 2012-10-30 06:41:05Z

0

The reason this is not working is that at the time your code is run, the 'pie' element hasn't been parsed and inserted into the DOM tree yet.

You need to essentially delay the execution of your code until the DOM element you're looking for is completely parsed, so putting that 'script' element just before the closing 'body' tag would solve your issue.

Alternatively, you could also bind an eventHandler to fire when the DOM tree has been parsed. I'd highly recommend going with a library to do this, to help overcome all the cross-browser issues. jQuery is a popular solution, but if you don't wish to include a huge library on your page, this library can help.

answered Oct 30, 2012 at 6:41

Clark Pan

6,0271 gold badge24 silver badges19 bronze badges

Comments

amantur · Accepted Answer · 2012-10-30 06:41:33Z

The object 'pie' is not there at the moment when you are trying to set its source. The script is parsed and executed as it is encountered by browser. In your page the script comes first and the image markup later. You can correct it as follows

<!Doctype HTML>
<html>
<head>
<script>
function setImage(){
    var thumbPrefix = "http://img.youtube.com/vi/";
    var thumbSuffix = "/mqdefault.jpg";
    var vidCode = ['fL01KMMi5_M','6akcfoJ05Aw','lPpot4OCnQs'];
    var thumb1Url = thumbPrefix + vidCode[0] + thumbSuffix;
    //document.write(thumb1Url); THIS IS CAUSING DOCUMENT TO CLEAR OF ALL MARKUP :(
    document.getElementById('pie').src=thumb1Url;
}
</script>
</head>
<body onLoad='setImage'>
<img src="" id="pie" />
</body>
</html>

the document.write(thumb1Url) is also causing the problem. Please try to use Console.log instead for debugging.

Collectives™ on Stack Overflow

Can you have change the src of an image to a variable in Javascript?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related