CODEWITHSUNDEEP
javascript
user1760745
user1760745

Reputation: 31

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

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...

Upvotes: 0

Views: 1282

Answers (4)

TheVillageIdiot
TheVillageIdiot

Reputation: 40512

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.

Upvotes: 0

Clark Pan
Clark Pan

Reputation: 6027

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.

Upvotes: 0

Daedalus
Daedalus

Reputation: 7722

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>

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

"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.)

Upvotes: 3

Related Questions