can't set attribute with javascript

Question

well here's my problem, it's probably my own very obvious and stupid mistake which I can't seem to notice, I haven't worked with javascript much. I think this code is pretty obvious, i'm displaying 3 .swf files, and depending from the result of a script which generates 3 random numbers, i want to edit the "src" and "value" attributes of the embedded flash movies.

i tried both using setAttribute and just element.value="ecc.." none works, the attribute stays the same

<!DOCTYPE HTML>

<html>
<head>
<title>example</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

<script type="text/javascript">
var prereel1=Math.floor(Math.random()*25);
var reel1="flash/"+ prereel1 + ".swf";
var prereel2=Math.floor(Math.random()*25);
var reel2="flash/"+ prereel2 + ".swf";
var prereel3=Math.floor(Math.random()*25);
var reel3="flash/"+ prereel3 + ".swf";
document.getElementById("slot1").value=reel1; 
document.getElementById("slot2").setAttribute("value", reel2);
document.getElementById("slot3").setAttribute("value", reel3);
document.getElementById("eslot1").src=reel1;
document.getElementById("eslot2").setAttribute("src", reel2);
document.getElementById("eslot3").setAttribute("src", reel3);
</script>

<div id="slots">

<    object width="150" height="210">
<param id="slot1" name="movie" value="flash/1.swf">
<embed id="eslot1" src="flash/1.swf" width="150" height="210">
</embed>
</object><object width="150" height="210">
<param id="slot2" name="movie" value="flash/1.swf">
<embed id="eslot2" src="flash/1.swf" width="150" height="210">
</embed>
</object><object width="150" height="210">
<param id="slot3"  name="movie" value="flash/1.swf">
<embed id="eslot3" src="flash/1.swf" width="150" height="210">
</embed>
</object>

</div>

</body>
</html>

If you are going to execute your JavaScript code immediately, place it after the content. — Šime Vidas
– Šime Vidas, Commented Apr 18, 2011 at 0:22

Raynos · Accepted Answer · 2011-04-18 00:21:19Z

Your script is placed above the flash objects.

The page loads in order. Once it get's to your script it tried to find the object in the DOM with id "slot1" and it does not find any because it has not loaded them yet.

So you want to take your script and place it below the content

<div id="slots">

<object width="150" height="210">
<param id="slot1" name="movie" value="flash/1.swf">
<embed id="eslot1" src="flash/1.swf" width="150" height="210">
</embed>
</object><object width="150" height="210">
<param id="slot2" name="movie" value="flash/1.swf">
<embed id="eslot2" src="flash/1.swf" width="150" height="210">
</embed>
</object><object width="150" height="210">
<param id="slot3"  name="movie" value="flash/1.swf">
<embed id="eslot3" src="flash/1.swf" width="150" height="210">
</embed>
</object>

</div>

<script type="text/javascript">
var prereel1=Math.floor(Math.random()*25);
var reel1="flash/"+ prereel1 + ".swf";
var prereel2=Math.floor(Math.random()*25);
var reel2="flash/"+ prereel2 + ".swf";
var prereel3=Math.floor(Math.random()*25);
var reel3="flash/"+ prereel3 + ".swf";
document.getElementById("slot1").value=reel1; 
document.getElementById("slot2").setAttribute("value", reel2);
document.getElementById("slot3").setAttribute("value", reel3);
document.getElementById("eslot1").src=reel1;
document.getElementById("eslot2").setAttribute("src", reel2);
document.getElementById("eslot3").setAttribute("src", reel3);
</script>

Alternatively you can wrap your code in an onload block.

<script type="text/javascript">
window.onload = function() {
    // code here
};
</script>

This means the code only runs when the page has finished loading. Then your flash objects will be in the DOM and you can access them.

@Xaendro Don't worry about it, everyone makes simple mistakes. If it solves your problem don't forget to click the tick and mark the answer as the accepted answer :)

Zlatko · Accepted Answer · 2011-04-18 00:25:27Z

2

Like Raynos said, your script is running before the objects are actually there.

You can encapsulate your code in a function, and then use a window.onload to trigger that function, ie: function randomizeMovies() { // your stuff }

window.onload = randomizeMovies;

answered Apr 18, 2011 at 0:25

Zlatko

19.7k14 gold badges76 silver badges130 bronze badges

Comments

Jim Michaels · Accepted Answer · 2011-04-18 03:51:07Z

after you have finished executing answers one and two,

document.getElementById('slot1').src="blah"; or a more sure way: document.getElementById('slot1').setAttriibute('src', "blah");

as you have done, either way works (can't remember for sure), but the latter is cross-browser I believe (definitely).

and yes, the javascript code seems to only work when it is put after the elements it is accessing. once in a while I have seen things work in the head element, but things don't work consistently up there and I have not found a solution yet to ensure that the browser has loaded the page. maybe a while loop checking that the page is loaded using a timer so as not to cause browser "runaway script" errors? I should tinker with that concept today.

(ah - danny goodman's book says that scripts that execute during a document's loading should contribute to generating the document and its objects. and he gives no code for that. so avoid onload)

Collectives™ on Stack Overflow

can't set attribute with javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related