HTML5输入类型Color，如何使用javascript更改其值

Question

the in the image you can see pencil and eraser buttons, what i want is when pencil is clicked the value of the input should be changed to black, and when its eraser it should be white.

i tried this <button onclick="$('#color-select').val(0,0,0);$('#stroke-select').val(3);">Pencil</button>

<button onclick="$('#color-select').val('255,255,255');$('#stroke-select').val(30);">Eraser</button>

but its not working, its changing the value of brush size, but color is turning black in both cases...need help.

Answer 1

<input type="color" value="#FF8080" id="color-select" />
<input type="number" id="stroke-select" value="10"/>
<button onclick="change_color('#000000' ,'30')">
    Pencil</button>
<button onclick="change_color('#ffffff' ,'15')">
    Eraser</button>
<script>
    function change_color(color ,stroke) {
    debugger
    $('#color-select').val(color);
    $('#stroke-select').val(stroke);
    }
</script>

Try Above Code

Answer 2

You should use the 6 character hex value for the color. The spec for the HTML5 color input requires it.

Ie:

<button onclick="$('#color-select').val('#ffffff');$('#stroke-select').val(30);">Eraser</button>
<button onclick="$('#color-select').val('#000000');$('#stroke-select').val(3);">Pencil</button>