getElementById won't work
<p>I'm just starting to learn JavaScript and can't figure out why getElementById won't work?</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;The Rock&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
body {
    text-align: center;
}
--&gt;
&lt;/style&gt;

&lt;script type="text/javascript"&gt;

function touchRock() { 
    var username = prompt("What is your name?");

    if (username) { alert("Hello, "+username+"! I am The Rock.");
    document.getElementById("rockimg").scr = "rock2.png";}
    }

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;



&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;img id="rockimg" src="rock1.png" align="middle" style="cursor:pointer" onclick="touchRock();"  /&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The idea is that once the user click on the rock, asks for his name, greets him and changes the image. The name/greeting part works, but the image doesn't change.</p>

<p>Any ideas? Thanks!</p>
