2 different javascript statements returning different values when it should be the same

Question

I can't seem to figure out this inconsistency in the code below. Shouldn't (x.value) be the same as (y)? Why are they returning different values?

Thanks in advance for the help.

html:

<form>
    <input name="startDate" type="date" value="">
</form>

<button onclick="getDate()">click</button>

javascript:

var x = $("input[name=startDate]")[0];
var y = $("input[name=startDate]")[0].value;

function getDate() {

    console.log(x.value); // returns what i've chosen in the datepicker (eg. 2018-05-14)
    console.log(y); // returns an empty string
}

y gives you the value of the input field, when x and y are created. x.value will give you the current value of the input at the time getDate() is caled. — Sirko
– Sirko, Commented May 14, 2018 at 8:59
x and y are set on page load. x evaluates the value after the function was called - y, again, does this on page load. There's no magic subscriber pattern in javascript where a variable updates is value magically for you. — baao
– baao, Commented May 14, 2018 at 8:59

gurvinder372 · Accepted Answer · 2018-05-14 08:59:55Z

2

x is HTMLInputElement object on which you are invoking value, which will give you latest value of x.

On the other hand, y is the String value of the same HTMLInputElement at the time of initialization of variable y, so it won't get updated automatically.

answered May 14, 2018 at 8:59

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

Comments

Rick van Lieshout · Accepted Answer · 2018-05-14 09:01:08Z

This is actually rather simple.

As soon as the script loads y is assigned a value on line 2, at this point the value of the input is an empty string as you haven't had the change to type anything yet.

The function gets executed when you click the button, at this point you have entered something in the input field so x.value will return whatever you entered in the input field.

y will still have the original value assigned on line 2 since you never update it.

you could update y like so:

var x = $("input[name=startDate]")[0];
var y = $("input[name=startDate]")[0].value;

function getDate() {
    y = $("input[name=startDate]")[0].value; // assign current value

    console.log(x.value); // returns what i've chosen in the datepicker (eg. 2018-05-14)

    console.log(y); // returns what you want
}

Beomi · Accepted Answer · 2018-05-14 09:01:41Z

0

Because y is FIXED value.

When you're calling DOM object with .value, it is not reactive object, but fixed value.

When you're calling x, it just points real HTML element. so you can get x's value with x.value in getDate function.

However, as you're already declared y as the value of HTML DOM object, so it won't be updated in getDate function.

answered May 14, 2018 at 9:01

Beomi

1,73716 silver badges18 bronze badges

Comments

Anadi Sharma · Accepted Answer · 2018-05-14 09:02:25Z

0

This is happening because as soon as your page is loaded in DOM, your javascript code is also initialized. Variable x has the input element, whereas y already is populated with an empty string because there was no default value at the initialization. So, definitely you can never see both the values as same.

answered May 14, 2018 at 9:02

Anadi Sharma

2951 silver badge8 bronze badges

Collectives™ on Stack Overflow

2 different javascript statements returning different values when it should be the same

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related