I want to assign the color to each of the letters that are displayed in an input, that is, if I write pedro, a color is assigned to
p---verde // e---rojo// r----rosado// o--amarillo
function miFuction() {
var x = document.getElementById("input").value;
document.getElementById("resultado").innerHTML = x;
}
function muestra_color() {
var letras = {
a: '#EA1437',
b: '#D8EA14',
c: '#4AEA14',
d: '#2BA97E',
e: '#0E1EC2',
f: '#460EC2',
g: '#A90EC2',
h: '#C20E3A',
i: '#EA1437',
j: '#D8EA14',
k: '#4AEA14',
l: '#2BA97E',
m: '#0E1EC2',
n: '#460EC2',
ñ: '#084213',
o: '#2C0842',
p: '#66EAD8',
q: '#F0E630',
r: '#6A61A2',
s: '#A28261',
t: '#DE2D08',
u: '#B24C5C',
v: '#95A5A6',
w: '#0B5345',
x: '#34495E',
y: '#07E816',
z: '#07E8A0'
};
var letra = color.docuemt.getElementById("input").value;
var color = document.getElementById("resultado").value;
var colorvalue = letras[color];
var result = `
<p style="color:${colorvalue}">${letra}</p>`
document.getElementById("resultado").innerHTML += result;
}
<div class="wraper-2">
<input placeholder="Escribe tu nombre" class="txt-resultado" id="input" value="NOMBRE" oninput="miFuction()">
</div>
<br>
<br>
<br>
<br>
<div class="wraper-3" id="oninput">
<p class="txt_resultado" id="resultado"></p>
</div>
There are several things to correct in your code:
a
toz
(lowercase) in the object to assign colors, convert each letter to lowercaseI added comments in the code so you know what is being done at each step.
As an additional note, and although it could be a matter of preferences, I consider that it is better not to put the event directly in the field label, but to assign it through Javascript, in this way, you will have HTML separated from the logic and you will always know where to modify each one.