как я могу установить случайный цвет для текстовой области?

Привет, я хочу сделать своего рода проверку типов. поэтому, когда вы помещаете какой-либо текст в поле ввода, этот текст появляется в текстовой области. Я хочу установить случайный цвет текста для текстовой области. Я использовал этот код:


let letters = document.querySelector('#txt').innerHTML.split('');
let quote = document.querySelector('#author').innerHTML.split('');
// Converts integer to hex
const colToHex = (c) => {
// Hack so colors are bright enough
let color = (c < 75)? c + 75: c
let hex = color.toString(16);
return hex.length == 1? "0" + hex: hex;
}
// uses colToHex to concatenate
// a full 6 digit hex code
const rgbToHex = (r,g,b) => {
return "#" + colToHex(r) + colToHex(g) + colToHex(b);
}
// Returns three random 0-255 integers
const getRandomColor = () => {
return rgbToHex(
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255));
}
// This is the prototype function
// that changes the color of each
// letter by wrapping it in a span
// element.
Array.prototype.randomColor = function() {
let html = '';
this.map( (letter) => {
let color = getRandomColor();
html +=
"<span style=\"color:" + color + "\">"
+ letter +
"</span>";
})
return html;
};
// Set the text
document.querySelector('#txt').innerHTML = letters.randomColor();
document.querySelector('#author').innerHTML = quote.randomColor();


но это не работает... Есть ли какие-либо решения..? С Уважением.

Решение проблемы

В соответствии с вашим требованием цвет каждой буквы не может отображаться в текстовой области, потому что вы не можете использовать теги html внутри текстовой области, но можете отображать в div со contenteditable="true"свойством.

function myFunction(){
document.getElementById("myDiv").innerHTML = "";
let inputValue = document.getElementById("myInput").value
let splitValue = inputValue.split("");
splitValue.forEach((element)=>{
let text = element;
let result = text.fontcolor(getRandomColor());
document.getElementById("myDiv").innerHTML += result
})
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
} .divTextArea {
border: 1px solid black;
min-width: 175px;
min-height: 100px;
max-width: max-content;
max-height: max-content;
margin-top: 5px;
border-radius: 3px;
} <input id="myInput" type="text" onchange="myFunction()">
<div class="divTextArea" contenteditable="true" id="myDiv"></div>