Question

I am building a simple paint app in HTML5 and JS.
I am having trouble changing the color of the canvas background.

I have an input box that calls the color picker. When the value changes it should call the getBgColor() function and update the canvas. However the function is not even being executed and I have no idea why!!

Input Box:

 <input id = "bgcolor_select" type="text" value="Background Color" onclick="colorPicker(event)" onchange="getBgColor()"/>

Function called by Input Box when value changes:

function getBgColor(){
    console.log("Bg Color: " + document.getElementById("bgcolor_select").value);
    context.fillStyle = document.getElementById("bgcolor_select").value;
    context.fillRect(0,0, canvas.width, canvas.height);
    }

When I run my application I can see the value changing in the field as I select colors but for some reason it does not call the function. If I add a character to the value and remove it, then it calls the function.

Any help appriciated!

Answer 1

When setting input.value = ..., no change event is fired. This only happens when the user changes the value through the actual textbox. You can manually fire it yourself, but in this case you can just call getBgColor() instead.