Question

I’m a beginner trying to get the HTML from a textbox to be used in an if/else statement.
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 observed that

    var txt_value =document.getElementById("TextBox1");

and then

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

The above example works absolutely fine.

Can someone please tell me what is wrong with:

    var txt_value =document.getElementById("TextBox1").value;

I don’t know why I’m getting an empty txt_value

Answer 1

The reason is that you are getting the value in txt_value before the user enters anything; hence the value is always empty.

IF you change your code to this:

var txt_value =document.getElementById("TextBox1");//removed .value

And the function Clicked to:

function Clicked(txt_value) {

    if (txt_value.value == 7) { //added .value
        alert("You are 7");
    }
    else { alert("You are not 7"); }
}

Should work.

Here’s a jsfiddle