0

I have a tag. It lets user to select a color from a colorpicker. It also has a default value before the selection is made. When user makes a selection, where is that selection stored? Looking at the code, in the developer tools, after selection is made, the value is still "fffffff"

<div class="headerTable">
  <h2>Header Table</h2>

  <form id="form">
    <div>
      <div class="tableField">
        <p>color 1</p>
        <input type="color" id="1" value=#ffffff>
      </div>
      <div class="tableField">
        <p>color 2</p>
        <input type="color" id="2" value=#111111>
      </div>
    </div>

    <!--<input type="submit" class="btn btn-info" value="Submit">-->
    <button class="btn btn-info" onclick="myFunction()">Submit</button>

  </form>

</div>


<script>
myFunction() {
    document.getElementById("1").value = //assign a "selected" value to the element's "value" parameter
}
</script>
Nol
  • 344
  • 3
  • 15
WDMak
  • 1
  • Is there more, uncommented code that you've decided not to include here? Because what you have there is not valid HTML, nor valid JavaScript. Please include a [mcve] in the question itself. – Heretic Monkey Oct 28 '16 at 21:43
  • 1
    _"Looking at the code, in the developer tools, after selection is made, the value is still "fffffff""_ - http://joji.me/en-us/blog/html-attribute-vs-dom-property, http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html tell you why. – CBroe Oct 28 '16 at 21:50
  • 3
    The value of `#ffffff` is an attribute of the input. While the value that you retrieve from it via `element.value` in javascript is a property of it. Picking a colour by clicking on it will change the value retrieved by javascript, but _will not_ change the attribute that you see if you inspect the element. Confusing at first, this is a reasonably common behaviour. Checkbox inputs for instance also behave in the same way. Toggling the checkbox then saving the file will cause the original attribute to be returned, while examining the `.value` will return the current state. EDIT: Beat me @CBroe – enhzflep Oct 28 '16 at 21:50

1 Answers1

-1

Save the value in a variable

function myFunction() { var color = document.getElementById("1").value; alert(color); }

Eduardo Martínez
  • 380
  • 3
  • 14