1

Tengo el siguiente código en JS para cambiar el color y el texto de un div, al hacer click en cada uno de los divs de mi paleta de color:

var indicadorColor = document.getElementById('indicador-de-color');
var indicadorMensaje = document.getElementById('indicador-de-color-mensaje');
var color = document.getElementsByClassName('color-paleta');

function mostrarColor(){
  indicadorColor.style.backgroundColor = this.style.backgroundColor;
  indicadorMensaje.innerText = 'PINCEL: ' + this.style.backgroundColor;
}

function seleccionarColor(){
  for(i=0; i<color.length; i++){
    color[i].addEventListener('click', mostrarColor)
  }
}

seleccionarColor();

Esto me funciona sin problemas, el tema es que lo quiero pasar a JQuery para ahorrar lineas de codigo y cuando pruebo con el siguiente codigo no me funciona:

    function seleccionarColor(){
        var color = $('.color-paleta');
            for(i=0; i<color.length; i++){
                $(color[i]).click(function() {
                 $('indicador-de-color').attr('background-color', $(color[i]).css('background-color'));
                 $('indicador-de-color-mensaje').text($(color[i]).css('background-color'))
            }
        )}
        }
        seleccionarColor();
})

No puedo ver el error :( Alguien me puede dar una mano? Gracias!

2 respuestas 2

1

El problema es que te falta usar el indicador de id's #. Intenta asi:

function seleccionarColor(){
    var color = $('.color-paleta');
        for(i=0; i<color.length; i++){
            $(color[i]).click(function() {
             $('#indicador-de-color').attr('background-color', $(color[i]).css('background-color'));
             $('#indicador-de-color-mensaje').text($(color[i]).css('background-color'))
        }
    )}
    }
    seleccionarColor();
})
1

Puedes hacer uso de mas propiedades de jQuery, como agregar un listener y cambiar cada comoponente por this, ademas, cuando apuntas a un elemento por su Id, utiliza #

$(() => {
    $('.color-paleta').on('click', function() {
        $('#indicador-de-color').attr('background-color', $(this).css('background-color'));
        $('#indicador-de-color-mensaje').text($(this).css('background-color'));
    });
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.