0

Necesito que a la hora de escribir en un input este se vea reflejado en oninput y que lo escrito cada letra tenga un color diferente

function miFuction(){

    var x = document.getElementById("input").value;
    document.getElementById("resultado").innerHTML= x;

}

(function(){
    InputEvent.oninput(function(){  
        
        var coloruno=document.getElementById('color-uno');
        var colordos= documet.getElementById('color-dos');
        var colortres=document.getElementById('color-tres');
        var colorcuatro=document.getElementById('color-cuatro');
        var colorquinto=document.getElementById('color-cinco');
        var colorseis=document.getElementById('color-sexta');
        var letrasuno=["a","b","c","d"];
        var letrasdos=["e","f","g","h"];
        var letrastres=["i","j","k","l"];
        var letrascuatro=["m","n","ñ","o"];
        var letrascinco=["p","q","r","s","t"];
        var letrasexta=["u","v","w","x","y","z"];

        coloruno.style.color=letrasuno[Math.floor(Math.random() * letrasuno.length)];
        colordos.style.color=letrasdos[Math.floor(Math.random() * letrasdos.length)];
        colortres.style.color=letrastres[Math.floor(Math.random() * letrastres.length)];
        colorcuatro.style.color=letrascuatro[Math.floor(Math.random() * letrascuatro.length)];
        colorquinto.style.color=letrascinco[Math.floor(Math.random() * letrascinco.length)];
        colorseis.style.color= letrasexta[Math.floor(Math.random() *  letrasexta.length)];
}

1 respuesta 1

1

Lo primero sería definir que es "color diferente", porque a la vista 2 colores pueden ser iguales, pero tienen código son distintos.

Un color puede escribirse desde 3 colores distintos R,G,B (Rojo, verde, azul), cuyas "tonalidades" (no sé si ese será el nombre técnico) van desde 0 a 255, en hexadecimal de 0 a FF

Entonces si combinas los 3, el color mínimo que tienes es 000000, y el máximo es FFFFFF que es igual a 16.777.215, es decir puedes tener casi 17 millones de colores distintos

Es decir, si empiezas con un contador desde 0 hasta 16.777.215, te dará un color distinto, luego puedes transformar ese número a hexadecimal usando la siguiente función

index.toString(16).padStart(6, "0")

Donde toString(16) convierte a hexadecimal un número y padStart agrega ceros a la izquierda (en este caso un máximo de 6) para mantener el formato RGB

El código sería el siguiente:

const Salida =  document.getElementById("Salida");
let index=0;

function colocarletra(){
   let span = document.createElement("span");
   span.style.color = "#" + index.toString(16).padStart(6, "0");
   span.innerText = event.key;
   index++;
   Salida.appendChild(span);
}
#Salida{
word-break: break-word;
}
<input type="text" id="Entrada" onkeypress="colocarletra()" />
<div id="Salida"></div>

4
  • Muchas gracias por ayudarme Commented el 22 sept. 2022 a las 13:19
  • pero como le asigano a cada letra un color diferente es decir que si escribo pedro la p----color verde// e----color rojo// d-----el color amarillo// r----azul// o----- rosado Commented el 22 sept. 2022 a las 14:04
  • @LauraYeraldinAcevedoHernand Es lo que te intentaba explicar, no existen ni 3 ni 14 ni mil colores, son 17 millones. Empezando por el #000000, #000001, #000002.... La diferencias de estos 3 primeros es mínima y al ojo humano es indetectable, pero en rigor son colores diferentes.
    – Yussef
    Commented el 22 sept. 2022 a las 22:52
  • @LauraYeraldinAcevedoHernand Por otro lado, quizás yo entendí mal el trabajo, si me lo explicas de otra manera puedo cambiar el código
    – Yussef
    Commented el 22 sept. 2022 a las 22:57

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.