admin管理员组文章数量:1430133
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>
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>
- 1 If you are going to execute your JavaScript code immediately, place it after the content. – Šime Vidas Commented Apr 18, 2011 at 0:22
3 Answers
Reset to default 2Your 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)
本文标签： htmlcan39t set attribute with javascriptStack Overflow
版权声明：本文标题：html - can't set attribute with javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745498004a2660895.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论