HTML5 / JavaScript / jQuery-使用jQuery选择器时，输入范围.value（）变为未定义？

Question

So I'm trying to make a input range object to allow the user to select from a range of values, and reading this and updating a jQuery variable.

If I try to access the value of:

<input id="scroll" type="range" min="1" max="60" value="5">

If I use:

$("#scroll").on("change", function() {
    variable = this.value;
});

it functions correct and the variable updates.

However, if I use the jQuery tag selector, as follows:

$("#scroll").on("change", function() {
    variable= $("#scroll").value;
}

variable becomes undefined.

Could you explain why? My thought is that "this" is referring to the HTML object as it is updated, and uses the HTML attribute, but frankly I don't know enough about it.

Answer 1

The correct syntax is $("#scroll").val() . You left out the # and you used the DOM property instead of the jQuery method.

$("#scroll").on("change", function() {
    variable= $("#scroll").val();
}