can't set attribute with javascript_问答_开发者

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 prereel开发者_StackOverflow中文版3=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>

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.

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;

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)