2

Tengo un formulario con 2 inputs y necesito que muestre el nombre con el color correspondiente al valor del input COLOR.

Por ejemplo: si el valor de nombre es "Jorge" y el de color es "rojo", que imprima Jorge en color rojo y no consigo hacerlo.

Se puede utilizar un CASE para asignarle a cada elemento del array un color o se podría hacer mediante un forEach que valide el color y se lo asigne al nombre, dejo el código por si alguien pudiera ayudarme:

function muestraConColor() {

    var colores = ["rojo","verde","azul","amarillo","rosa","marron","violeta","naranja"];
    var nombre= document.getElementById("nombre_form").value;  
    var color= document.getElementById("color_form").value;
   
    document.getElementById("div").innerHTML = nombre;

}
NOMBRE<input type="text" id="nombre_form"></input>
COLOR<input type="text" id="color_form""></input>
<input onclick="muestraConColor()" type="button" value="AÑADE PARTICIPANTE"></input>

2 respuestas 2

5

Puedes utilizar algo como esto:

function muestraConColor() {
    var colores = {
      rojo: 'red',
      verde: 'green',
      azul: 'blue',
      amarillo: 'yellow',
      rosa: 'pink',
      marron: 'tomato',
      violeta: 'violet',
      naranja: 'orange'
    };
    var nombre= document.getElementById("nombre_form").value;  
    var color= document.getElementById("color_form").value;
    var colorValue = colores[color] || 'red';
    var result = `<div style="color:${colorValue}">${nombre}</div>`
    document.getElementById("div").innerHTML += result;
}
NOMBRE<input type="text" id="nombre_form"></input>
COLOR<input type="text" id="color_form""></input>
<input onclick="muestraConColor()" type="button" value="AÑADE PARTICIPANTE"></input>
<div id="div"></div>

Aunque recomendaría que el input para seleccionar el color debería ser un <select> con opciones.
Esto debido a que si alguien ingresa un valor que no exista en tu array, el programa fallara.

function muestraConColor() {
    var nombre= document.getElementById("nombre_form").value;  
    var color= document.getElementById("color_form").value;
    var result = `<div style="color:${color}">${nombre}</div>`
    document.getElementById("div").innerHTML += result;
}
NOMBRE
<input type="text" id="nombre_form"></input>
COLOR 
<select id="color_form">
  <option value="red">rojo</option>
  <option value="green">verde</option>
  <option value="blue">azul</option>
  <option value="yellow">amarillo</option>
  <option value="pink">rosa</option>
  <option value="brown">marron</option>
  <option value="violet">violeta</option>
  <option value="orange">naranja</option>
</select>
<input onclick="muestraConColor()" type="button" value="AÑADE PARTICIPANTE"></input>
<div id="div"></div>

Saludos.

4
  • 1
    Lo de usar un select es muy cierto, ya que si ingresa un valor no contenido, fallará la ejecución del mismo.
    – Excorpion
    Commented el 5 nov. 2020 a las 17:03
  • 1
    @Excorpion correcto. Agregaré un ejemplo con select en vez de input. Commented el 5 nov. 2020 a las 17:05
  • Deja los dos, para dar a entender la diferencia y el problema que pueda causar
    – Excorpion
    Commented el 5 nov. 2020 a las 17:06
  • Muchas gracias a ambos por la ayuda, es cierto que usar un select es lo mejor, la idea de utilizarlos de esta manera es que pueda controlar las excepciones luego.
    – Carlos
    Commented el 5 nov. 2020 a las 17:21
1

Mira esto, como comentan arriba no hay nada como un dropdown para opciones fijas pero si es posible hacer esto, digamos que es por diversión jaja.

Puedes Utilizar un RegExp para hacer match del color que mas se parezca al texto, y nutrir tu array con mas información como por ejemplo el codigo del color puede ayudar.

Sin un dropdown tienes lo que querias con un input!!

var colores = [
  {
    name: "rojo",
    color: "#ff0000"
  },
  {
    name: "verde",
    color: "#00ff00"
  },
  {
    name: "azul",
    color: "#0000ff"
  },
  {
    name: "amarillo",
    color: "#ffff00"
  },
  {
    name: "rosa",
    color: "#ffb9b9"
  },
  {
    name: "marron",
    color: "#997c50"
  },
  {
    name: "violeta",
    color: "#c298ff"
  },
  {
    name: "naranja",
    color: "#ff9b00"
  }
 ];

const color = document.querySelector("#color_form")
const nombre = document.querySelector("#nombre_form")
const append = document.querySelector("#append");
const ul = document.querySelector("#ul");

append.addEventListener("click", e => {
  let exp = new RegExp(color.value, "i")
  let result = colores.filter(color_item => {
    return exp.test(color_item.name)
  })[0]
  let li = document.createElement("li");
  li.innerHTML = nombre.value;
  li.style.color = result.color
  ul.appendChild(li)
})
<h1>NOMBRE</h1>
<input type="text" id="nombre_form">
<h1>COLOR</h1>
<input type="text" id="color_form">
<button id="append">Agregar</button>
<ul id="ul"></ul>

De igual manera esto es un poco inestable aunque tenga un regexp porque siempre va a retornar el color que mas coincida, sin importar si esta totalmente escrito o no.

Espero que te sea de ayuda, un saludo.

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.