How to correctly alert my variable
===

I have a pretty decent understanding of Jquery but decided to dig in inside JavaScript because I have no understanding of "raw" JavaScript. <br/>So here's my problem: on document load my function executes fine and alerts: <b>'Hi my name is John'</b> but on button click it alert's just :<b>'Hi my name is'</b>. My question is why is this happening and how can I solve it? <br/>I know that I can FIX IT by putting my variable INSIDE my function, but is there a way to call my FIRST variable declared outside my function <b>(variable just after script type)</b>?  
<br/><a href="http://jsfiddle.net/6nuCx/">Fiddle here</a>
<br/>My code:  
 

    <!DOCTYPE html>
    <head>
    <script type="text/javascript">
    
    //If I try to call this variable WILL NOT WORK:(
    
    var name ='John'; <--SO HOW CAN I CALL THIS VARIABLE TO MY CLICK FUNCTION?--> 
    
    function displayName(name)
    {
    //If I put my variable like this WILL WORK fine...
    //var name ='John';
    alert('Hi I am '+name);
    
    }
   
    //This function works on document load
    //displayName(name);
    </script>
    </head>
    <body>
    
    <!--This doesn't work well if variable is OUTSIDE my function:(-->
    <button type="button" onclick="displayName(name)">Display Name</button>
    </body>
    </html>
