HTML5 input type color doesn't show value when created via js

Question

I am creating a table via javascript and one column will contain an html color picker. The problem that I have is that in Chrome the default value is set but the color that is displayed on the color picker is black.

This is the javascript that I am using

c = r.insertCell(1);
c.setAttribute('class','second');
inp=document.createElement("input"); 
inp.setAttribute('type','color');
inp.setAttribute('id','colo_'+i);
inp.setAttribute('value','#ffffff');
inp.setAttribute('class','datafield');
inp.addEventListener('change', saveFields);
c.appendChild(inp);

This is the html that is generated from if

<td class="second">
<input type="color" id="colo_0" value="#8080ff" class="datafield">
</td>

Is this a bug or am I doing something wrong?

Answer 1

Interesting. I was able to replicate your results (example).

Rather than using setAttribute, set the value directly:

inp.value = '#ffffff';

Apparently that makes Chrome happy. (Live Copy | Source)

---

Side note: All of the things you're setting via setAttribute have reflected properties you can use instead:

inp = document.createElement("input"); 
inp.type = 'color';
inp.id = 'colo_'+i;
inp.value = '#ffffff';
inp.className = 'datafield';

Note that the last one is className rather than class.

Updated Example | Source