Not Getting HTML TextBox Value in Javascript function? Have searched on it But didn't got convincing answer
===

I m a beginner trying to get html textbox value and do some if else 
This is my html code

        <label id="label1">
        Enter any Number:
    </label>
    <input type="button" id="Button1"  value="button" />
        <input type="text" id="TextBox1" name="myname" />

And My JavaScript code is 

        <script type="text/javascript">
    //<![CDATA[
    var buttonElement = document.getElementById("Button1");
    var txt_value =document.getElementById("TextBox1").value;
    buttonElement.addEventListener('click', function() { Clicked(txt_value) }, false);

    function Clicked(txt_value) {

        if (txt_value == 7) {
            alert("You are 7");
        }
        else { alert("You are not 7"); }
    }
    //]]>
        </script>


I Observerd that 
        
        var txt_value =document.getElementById("TextBox1");
and then 

          buttonElement.addEventListener('click', function() { Clicked(txt_value.value) }, false);

Above Works absolutely fine 

Can someone pls tell me what is problem with 

        var txt_value =document.getElementById("TextBox1").value;
i dnt know why m getting empty m getting empty txt_value