Not Getting HTML TextBox Value in Javascript function? Have searched, but didn't find convincing answer

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

Icarus · Accepted Answer · 2012-07-18 14:46:33Z

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

answered Jul 18, 2012 at 14:46

Icarus

64k14 gold badges102 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shilpa Gurnani Over a year ago

thnks :) ya tht wrks i know. So Reason is m trying to access the value before user enters so getting empty nice thanku

Icarus Over a year ago

@ShilpaGurnani I am glad I was able to help. I notice that you are knew here... please don't forget to accept the answer that helped you the most. This will increase the chances of getting help here in the future.

Shilpa Gurnani Over a year ago

is that because of using addEventListener otherwise if m must have written onclick within html tag it must have wrked fine with var txt_value =document.getElementById("TextBox1").value;

Shilpa Gurnani Over a year ago

ya sure :) i was accepting the answer but its like i got prompt that u can accept after 6 minutes

Icarus Over a year ago

@ShilpaGurnani the problem is that your variable assignment (var txt_value=document.getElementById('TextBox1').value) occurs immediately when the page loads, before the user has a chance to interact with the page; hence the txt_value variable ends up being blank. You need to read the value only when the user clicks the button. It's okay to get a reference to the text input element when the page loads, but you need to read the value only when the user clicks.

|

Split Your Infinity · Accepted Answer · 2012-07-18 14:51:59Z

1

Move the getting of the value into the click handler...

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

document.getElementById("Button1").onclick = function () {
    var txt_value = textbox1.value;

    if (parseInt(txt_value, 10) === 7) {
        alert("You are 7");
    } else { 
        alert("You are not 7"); 
    }
};

Now you get the value that is in the textbox when the page loads.

Here is a JSFiddle to test this.

Update Improved the efficiency by caching the textbox. Removed the addEventListener to an onclick (more browser support)

edited Jul 18, 2012 at 14:51

answered Jul 18, 2012 at 14:46

Split Your Infinity

4,2391 gold badge23 silver badges19 bronze badges

1 Comment

Shilpa Gurnani Over a year ago

Actually i read some where that latest is like use event listners instead of onclick hence used and btw i my addEventListener works for chrome and addEvent works for IE So Is ny other way which can be used across all browsers except the above onclick in tag?

Collectives™ on Stack Overflow

Not Getting HTML TextBox Value in Javascript function? Have searched, but didn't find convincing answer

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related