2

$( document ).ready(function() {

  $("#generar").click(function(){
var color_fondo_tabla = $("#color_fondo").val();

 $("#color_fondo td").css("background-color:", color_fondo_tabla);
   });
     });
<input type="button" value="Generar" id="generar">

<input type="color" id="color_fondo"></td>
Con esta función que creado tan solo me obtiene lo siguiente: #000000

2
  • yo creo que lo obtienes bien, el problema es que es eso, el color es blanco, lo tienes en código hexadecimal, cómo lo quieres ? no entiendo muy bien el problema aquí
    – Iria
    Commented el 31 ene. 2020 a las 16:22
  • Lo obtiene correctamente , es el color en hexadecimal. Si ese input tuviera un value, podrías hacer lo siguiente : $("#color_fondo").val();
    – sourcer
    Commented el 31 ene. 2020 a las 18:24

4 respuestas 4

1

Realmente lo que haces sí funciona, pero tienes dos errores:

  • No estas seleccionando bien el <td>, no sé como sea tú ejemplo ya que no colocas todo tu HTML, pero te dejo un ejemplo con una tabla aparte.
  • En el método de .css estás agregando mal el primer argumento debe de ir así .css("background-color", color_fondo_tabla); sin los ":".

Cualquier duda hazla saber.

$( document ).ready(function() {

  $("#generar").click(function(){
var color_fondo_tabla = $("#color_fondo").val();

console.log(color_fondo_tabla);

 $("td").css("background-color", color_fondo_tabla);
   });
     });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Generar" id="generar">

<input type="color" id="color_fondo">

<table border="1">
<th>
Nombre
</th>
<tr>
<td>
</td>
</tr>

</table>

2
  • 1
    Muchas gracias Vick, lo del td es más que nada para seleccionar justamente ese td que voy a generar con el código. Ahora ya por fin me agarro el color.
    – Azumay404
    Commented el 31 ene. 2020 a las 20:16
  • 1
    No hay de qué! Buen día :D Commented el 31 ene. 2020 a las 21:40
1

Encontré esta manera, espero y te sirva.

$( "#colorId" ).change(function(value) {  
  console.log($(this).val());
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<input id="colorId" type="color">

0

Esto de aquí te servirá:

var valor = "";
document.getElementById('color_fondo').onchange=function(){
	valor = this.value;
  alert(this.value);
}

0

Lo que veo que esta principalmente mal es el selector que usas para cambiar el color al <td>.

Por regla los nombres e IDs no pueden tener espacios

El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el atributo class... https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales/id

Hice este ejemplo funcionando en CodeSandbox para ti, espero te sirva. Saludos

https://codesandbox.io/s/jquery-get-input-color-value-obqs3

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.