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>