Paleta de colores en JS

[marlanga]

Veo que te has molestado en programar algo, asi que yo me molesto en reorganizarlo un poco lo que mas o menos tienes:

http://jsfiddle.net/marlanga/jufrgchc/

Código Javascript:

String.prototype.pad = function( n, p ) {
    var s = '', n = Math.max( 0, n - this.length );
    while( n-- ) {
        s = p.toString() + s;
    }
    return s + this;
};
var ColorPicker = {
    elementos : {
        r : null,
        g : null,
        b : null,
        input : null,
        color : null
    },
    funciones : {
        cargar : function() {
            ColorPicker.elementos.r = document.getElementById( "rojo" );
            ColorPicker.elementos.g = document.getElementById( "verde" );
            ColorPicker.elementos.b = document.getElementById( "azul" );
            ColorPicker.elementos.input = document.getElementById( "resultado" );
            ColorPicker.elementos.color = document.getElementById( "color" );
            
            ColorPicker.elementos.r.addEventListener( 'input', ColorPicker.funciones.change );
            ColorPicker.elementos.g.addEventListener( 'input', ColorPicker.funciones.change );
            ColorPicker.elementos.b.addEventListener( 'input', ColorPicker.funciones.change );
            
            ColorPicker.funciones.change();
        },
        getHex : function( value ) {
            value = parseInt( value );
            return value.toString( 16 ).pad( 2, 0 ).toUpperCase();
        },
        getColor : function() {
            var r = ColorPicker.funciones.getHex( ColorPicker.elementos.r.value );
            var g = ColorPicker.funciones.getHex( ColorPicker.elementos.g.value );
            var b = ColorPicker.funciones.getHex( ColorPicker.elementos.b.value );
            return '#' + r + g + b;
        },
        putColor : function( color ) {
            ColorPicker.elementos.color.style.backgroundColor = color;
            console.log(color);
        },
        change : function() {
            var color = ColorPicker.funciones.getColor();
            ColorPicker.funciones.putColor( color );
            ColorPicker.elementos.input.value = color;
        }
    }
};
window.onload = function(){
    ColorPicker.funciones.cargar();
}
 

He encapsulado el codigo en un solo objeto, ahora está organizado en una sola variable global, en vez de ser un conjunto de funciones y variables globales desperdigadas por tu script (que pueden provocar colisiones de nombbres con otros scripts que tengas en la misma página).

Para hacer pad (rellenar cadenas con caracteres predeterminados) he modificado el "prototipo" de la clase String de javascript para meterle nueva funcionalidad

Para que funcione el xxx.toString(16), el objeto xxx DEBE SER un número, no un string.

El resto creo que ya lo entenderás al leerlo.