debugging - Having problems with changing image javascript -

i'm new javascript , having problems changing image on html document. know in order change images, need change src attribute of img.

i have image called "magenta.jpg" want replace "fuschia.jpg" page loads.

my html

<img src="magenta.jpg" name="photo" id="photo">

my javascript

document.getelementbyid("photo").src = "fuschia.jpg";

when try doing this, error says:

uncaught typeerror: cannot set property 'src' of null

could please me understand going wrong code, , how fix it?

it executed before dom loaded. solve can either move <script> bottom of document or

inside .js file:
¯¯¯¯¯¯¯¯¯¯¯¯¯¯

window.onload = function(){     document.getelementbyid("photo").src = "fuschia.jpg"; }

or if prefer jquery:

$(function(){     $("#photo").attr("src", "fuschia.jpg"); });

IO