Javascript DOM HTML Input Color compare defaultValue and value property

Introduction

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

Change the color of the color picker, and then click the button.

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

View in separate window 

<!DOCTYPE html>
<html>
<body>
Color picker: <input type="color" id="myColor" value="#ff0080">
<button type="button" onclick="myFunction()">Test</button>
<p id="demo"></p>

<script>
function myFunction() {//from  ww  w.j a  v a  2 s .co  m
  var x = document.getElementById("myColor");
  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>Change the color of the color picker to see the difference!";
  } else {
    document.getElementById("demo").innerHTML = "The default value was: " + defaultVal
    + "<br>The new value is: " + currentVal;
  }
}
</script>

</body>
</html>



PreviousNext

Related