2个不同的javascript语句在应该相同时返回不同的值

时间:2018-05-14 08:56:15

标签: javascript

我似乎无法在下面的代码中找出这种不一致。 (x.value)不应该与(y)相同吗?为什么他们会返回不同的值?

提前感谢您的帮助。

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
}

4 个答案:

答案 0 :(得分:2)

x是您要调用HTMLInputElement的{​​{1}}个对象,会为您提供value 的最新值。

另一方面,x是变量y的初始化时String HTMLInputElement值,因此它不会自动更新。

答案 1 :(得分:0)

这实际上相当简单。

一旦脚本加载 y 在第2行分配了一个值,此时输入的值是一个空字符串,因为您还没有更改任何内容。

单击按钮时会执行该函数,此时您在输入字段中输入了一些内容,因此x.value将返回您在输入字段中输入的内容。

y仍然会在第2行分配原始值,因为您永远不会更新它。

你可以像这样更新y:

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
}

答案 2 :(得分:0)

因为y是固定值。

当您使用.value调用DOM对象时,它不是被动对象,而是固定值。

当您调用x时,它只指向真正的HTML元素。 因此,您可以在x函数中使用x.value获得getDate的值。

但是,由于您已将y声明为HTML DOM对象的值,因此不会在getDate函数中更新它。

答案 3 :(得分:0)

这种情况正在发生,因为只要您的页面加载到DOM中,您的javascript代码也会被初始化。变量x具有input元素,而y已经填充了空字符串,因为初始化时没有默认值。所以,绝对不能将这两个值视为相同。