Замените div на другой div при нажатии

Question

Теперь я хочу, чтобы #youtube отображался всегда, но если вы нажмете на него, я хочу преобразовать его в #embed. Не могу заставить его работать. и я имею в виду, что это не то, что я только что объяснил. Ничего не произошло.

<div id="youtube" onclick="replace()" style="display:block"> 
<img src="http://img.youtube.com/vi/'.$id.'/1.jpg"> 
<span class="title"><font color="#999">YouTube&trade; Video:</font> '.$title.'</span> 
<span class="views">Views: '.number_format($views).'</span> 
<span class="description">'.$desc.'</span> 
</div> 

// show this only if they clicked on #youtube 
<div id="embed" onclick="replace()" style="display:none"> 
<object width="425" height="344"> 
<param name="movie" value="http://www.youtube.com/v/$1?fs=1"</param> 
<param name="allowFullScreen" value="true"></param> 
<param name="allowScriptAccess" value="always"></param> 
<embed src="http://www.youtube.com/v/$1?fs=1" 
     type="application/x-shockwave-flash" allowscriptaccess="always" allowFullScreen="true" width="425" height="344"> 
</embed> 
</object> 
    </div> 

JS:

Answer 1

Вы недостающие кавычки ваши имена Div в getElementById:

function replace() { 
    document.getElementById("youtube").style.display="none"; 
    document.getElementById("embed").style.display="block"; 
} 

getElementById принимает строку, код вставки является имя идентификатора, вы должны использовать строковый литерал, обернув его тиками.

Answer 2

Просто экранирует имя вашего DIV

document.getElementById('youtube').style.display="none"; 
document.getElementById('embed').style.display="block";