Color Mixer (javascript)

Question

I made a simple table with background colors. Every td has a input type radio. And every radio button has its own value. The value is the the color of the where it is.

(Picture)

Here is the HTML code.

<input type="radio" name="radio2" value="#FF0000">
<input type="radio" name="radio2" value="#666666">
<input type="radio" name="radio2" value="#003399">

<input type="radio" name="radio3" value="#FF0000">
<input type="radio" name="radio3" value="#666666">
<input type="radio" name="radio3" value="#003399">

etc... 

I´ve tryed the get the value of the clicked button via onClick

<input type="radio" value="#FF0000" name="radio1" id="rot"
onClick="document.getElementById('write').value=(this.value)"

What I´d like to do now is to add all the selected colors together and to mix them. At least i like to print them out in a div or something else. But i don´t know how to add them together. I hope you guys understand what I am looking for.

Thanks :)

Answer 1

A jQuery method to print the colour value of the radio button which has been clicked.

$('input').click(function(){
    alert($(this).val());
});

Now you'll need to store each colour as they've been clicked, convert their values from hex to dec, and then add the values together.

Here's a good StackOverflow question on converting hex to rgb in JavaScript -

RGB to Hex and Hex to RGB

Say if you wanted the mixed colour to appear in a div named 'mixedColour', your JavaScript would look something like this -

$(document).ready(function(){
    $('input').click(function(){
        var selectedColour = $(this).val();

        //This is where you'll need to add the colours together.

        $('mixedColour').css('background-color',selectedColour);
    });
});