Hola, quiero hacer una especie de verificador de tipos. por lo tanto, cuando coloca texto en el cuadro de entrada, ese texto aparece en el área de texto. Quiero establecer un color de texto aleatorio para el área de texto. Usé este código:
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();pero no funciona... ¿Hay alguna solución...? Saludos.
Según su requisito, el color de cada letra no se puede mostrar en el área de texto porque no puede usar etiquetas html dentro del área de texto, pero se puede mostrar en div con la propiedad 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>