html - how to get value of type="color" input using javascript - Stack Overflow

admin管理员组

文章数量:1187854

I used this above html code for my project..but i don't know how to get value of above input using javascript

<form>
  <input type="color" id="favcolor">
</form> 

can someone help me ?

Thanks

I used this above html code for my project..but i don't know how to get value of above input using javascript

<form>
  <input type="color" id="favcolor">
</form> 

can someone help me ?

Thanks

• javascript
• html

Share Improve this question Follow asked May 15, 2014 at 18:38 user3624843user3624843 17511 gold badge11 silver badge88 bronze badges 7

• Have you tried the value attribute? – ComFreek Commented May 15, 2014 at 18:39
• i want to get dynamic value ... – user3624843 Commented May 15, 2014 at 18:40
• 1 how do you usually get the value of an input tag? – Ibu Commented May 15, 2014 at 18:41
• 2 @user3624843 Access the value attribute (of the DOM object). It works. – ComFreek Commented May 15, 2014 at 18:42
• 1 create input value. but this time i want to get dynamic value of this input – user3624843 Commented May 15, 2014 at 18:43

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 25

To simply get the value

document.getElementById("favcolor").value;

You can add an event listener if you want to get the color when the selection changes. You’d do something like this:

var theInput = document.getElementById("favcolor");

theInput.addEventListener("input", function(){
  var theColor = theInput.value;
  
  // Do something with `theColor` here.
}, false);

<input id="favcolor" type="color"/>

Here’s a working JSFiddle.

We can simply assign the color value to the label.

Sample code is here

<label id ="colorVal">Select color</label>
<input type="color" id ='color'>Value</input>

JS Code

let colorInput = document.getElementById('color');


colorInput.addEventListener('input', () =>{
document.getElementById('colorVal').innerHTML = colorInput.value;
});

Sample codepen link

https://codepen.io/ragi_jay/pen/poRMwMX

本文标签： htmlhow to get value of typequotcolorquot input using javascriptStack Overflow