Javascript DOM HTML Input Range compare defaultValue and value property

Introduction

An example that shows the difference between the defaultValue and value property:

Slide up or down with the slider control, and then click the button.

The default value is not affected when you change the value of the slider.

View in separate window 

<!DOCTYPE html>
<html>
<body>


Points: <input type="range" id="myRange" value="20">
<button type="button" onclick="myFunction()">Test</button>

<p id="demo"></p>

<script>
function myFunction() {/*from   w ww  .  ja  v a2  s.  co m*/
  var x = document.getElementById("myRange");
  var defaultVal = x.defaultValue;
  var currentVal = x.value;

  if (defaultVal == currentVal) {
    document.getElementById("demo").innerHTML = "Default value and current value is the same: "
    + x.defaultValue + " and " + x.value
    + "<br>Slide up or down with the slider control to see the difference!";
  } else {
    document.getElementById("demo").innerHTML = "The default value was: " + defaultVal
    + "<br>The current value is: " + currentVal;
  }
}
</script>

</body>
</html>



PreviousNext

Related