Tengo que escribir una página donde el usuario escriba algún texto en un cuadro de texto. El usuario hace clic en el botón Intro, después de esto, el texto escrito en el cuadro de texto se muestra debajo del cuadro de texto. Cada letra del texto debajo del cuadro de texto debe cambiar su color cada segundo.
No sé cómo puedo referirme a esta función jQuery $(function() {} ) porque la consola me da un error de que tengo que especificar el nombre de la función. Soy solo un principiante en la programación y estaría muy agradecido por cualquier tipo de ayuda.
var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], idx; $(function() { var div = $('#arch'); var chars = div.text().split(''); var text = document.getElementById('text').value; document.getElementById('arch').innerHTML = text; div.html(''); for(var i = 0; i < chars.length; i++) { idx = Math.floor(Math.random() * colours.length); var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]); div.append(span); chars.setInterval(colours, 1000); // change colors of letters every second } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="text" id="text"> <button onclick="function()">ENTER</button> <br /><br /> <div id="arch"></div>El problema principal en su código es que no ha definido la function() que invoca desde el atributo onclick en ninguna parte. Sin embargo, debe tenerse en cuenta que el uso de atributos onX en HTML para invocar funciones JS está desactualizado y ya no es una buena práctica.
El mejor enfoque es usar controladores de eventos discretos vinculados a través de JS, ya sea usando el método nativo addEventListener() o el método on() de jQuery, ya que ha incluido esa biblioteca.
A partir de ahí, puede definir su lógica para establecer el texto del elemento #arch en función del valor de entrada y luego crear una función separada, llamada en setInterval() cada 1 segundo, para recorrer los elementos span y cambiar su color aleatoriamente. Prueba esto:
let colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"]; jQuery($ => { $('button').on('click', () => { let text = $('#text').val(); let $arch = $('#arch').html(''); $arch.append(text.split('').map(char => `<span>${char}</span>`)); updateColours(); // set random colours now setInterval(updateColours, 1000); // update colours every second }); let updateColours = () => { $('#arch span').each((i, el) => { let idx = Math.floor(Math.random() * colours.length); $(el).css("color", colours[idx]) }); } }); <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <input type="text" name="text" id="text" value="Lorem ipsum dolor sit amet consectetur adipiscing elit" /> <button>ENTER</button> <br /><br /> <div id="arch"></div>He resuelto el error, puedes comprobar este código.
<html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input type="text" name="text" id="text"> <button>ENTER</button> <br /><br /> <div id="arch"></div> <script> var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], idx; $(function () { $("button").click(function () { console.log("button clicked"); var text = document.getElementById('text').value; document.getElementById('arch').innerHTML = text; var div = $('#arch'); var chars = div.text().split(''); setInterval( function () { div.html(''); for (var i = 0; i < chars.length; i++) { idx = Math.floor(Math.random() * colours.length); var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]); div.append(span); } }, 1000); // change colors of letters every second }); }); </script> </body> </html>```Hay algunos problemas con su código.
function se conserva como palabra clave, nombra tu función de otra maneraarch antes de que haya algo en él. Ahora relleno el text usando el campo de entradafor debe estar dentro del setIntervalarch de compensación debe estar dentro del setInterval var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"]; var idx; function showLetters() { var ele = $('#arch'); var chars = document.getElementById('text').value.split(''); setInterval(function() { ele.empty(); for(var i = 0; i < chars.length; i++) { idx = Math.floor(Math.random() * colours.length); var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]); ele.append(span); } }, 1000); }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="text" id="text"> <button onclick="showLetters()">ENTER</button> <br /><br /> <div id="arch"></div>