How to change the value of embed src with JavaScript?

Question

I have just begun to learn JS. I am trying to change the value of embed src in the tag present in my HTML code. But am unable to do so with the following code I've written -

HTML -

<ol>
<li><a href="http://embedgames.ru/wp-content/games/kitty-throw.swf" 
    onclick="showGame(this);return false;">Kitty Throw</a></li>
</ol>

<embed id="gameHolder" src="http://pictat.com/i/2011/7/10/32479playscrnba.jpg" 
    quality="high" menu ="false" width="550" height="400" 
    type="application/x-shockwave-flash" 
    pluginspage="http://www.macromedia.com/go/getflashplayer" /></center>

JS:

function showGame(whichgame){var source=whichgame.getAttribute("href");
var game=document.getElementById("gameHolder");
game.setAttribute("src",source);}

I want the JS to display the flash file selected in the gameHolder space which by default holds an image. I am unable to do this with just my beginner knowledge of JS, also please explain the code as you use it.

Answer 1

It may depend on the browser and the type of the embedded object, how you have to change the object(for example there are special methods for flash-movies like Play() , but the object isn't a flash-movie at the begin)

A common way is to replace the whole embed-node with a new <embed>:

function showGame(whichgame){
  var source=whichgame.getAttribute("href");
  var game=document.getElementById("gameHolder");
  var clone=game.cloneNode(true);
  clone.setAttribute('src',source);
  game.parentNode.replaceChild(clone,game)
}