javascript - Value of HTML input range, getattribute vs value -
i have created html input element type="range" , id="slider". why cannot access value using getattribute("value") method? debugger shows there attribute named "value" value not equal value of element. should not value of range element attribute?
var slidervalue1=document.getelementbyid("slider").getattribute("value"); var slidervalue2= document.getelementbyid("slider").value;
why cannot access value using getattribute("value") method?
you can't because, .getattribute("value")
return value of element write html (if don't change that, default value).
example:
with: <input type="range" id="slider" value="500">
document.getelementbyid("slider").getattribute("value");
return 500
if use input change range.
debugger shows there attribute named "value" value not equal value of element.
it's true, , right. if set default value never change (is useful reset input).
should not value of range element attribute?
no, current value of element stored outside html, access current vale must use: document.getelementbyid("slider").value;
, it's same type of input not on range.
$(function(){ $("input[name=foo]").on("change",function(){ var val = $(this).val(); var attr = $(this).attr("value"); var prop = $(this).prop("value"); console.log(" --- jquery test js ----"); console.log("current value: (using .val)",val); console.log("initial value: (using .attr)",attr); console.log("current value: (using .prop)",prop); }); }); //native js function originaljs(){ console.log(" --- original js ----"); console.log("current value: (using .value)",this.value); console.log("initial value: (using .attr)",this.getattribute("value")); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <input type="range" onchange="originaljs.call(this)" name="foo" value="500"/> <p>run , watch console :) ... watch value="500" (but range 0-100)</p> <input type="text" onchange="originaljs.call(this)" name="foo" value="500"/>
Comments
Post a Comment