Quiero cambiar el color al azar al pasar el mouse sobre <a class="c-link" pero no funciona y me pregunto qué estoy haciendo mal aquí.
<!doctype html> <html> <script> window.onload = function() { function randomColor() { let color = []; for (let i = 0; i < 3; i++) { color.push(Math.floor(Math.random() * 256)); } return 'rgb(' + color.join(', ') + ')'; } document.querySelector('c-link').addEventListener("mouseover", function() { document.a.style.fontcolor = randomColor(); }); } </script> </head> <body> <div class="c-text__layer"> <div class="c-text">Lorem ipsum dolor sit amet consetetur,<br> sadipscing elitr, <a class="c-link" href="https://stackoverflow.com/"> sit amet dolor</a></div> </div> </body> </html>Debe especificar la clase con un . dentro del selector de consultas. Por lo tanto querySelector('.c-link') .
No puede simplemente llamar a document.a porque a no es una propiedad o método del objeto del document .
Además, hay style.color y style.font pero no fontcolor .
En su lugar, use otro selector: querySelector('a') para seleccionar todos los anclajes en el documento. Sin embargo, esto afectará a todos los enlaces. Si solo desea que funcione para uno o algunos elementos, puede usar el data-attribute , una id o incluso otras clases de CSS en lugar de apuntar a en el querySelector.
También puede leer un poco en MDN para obtener más información sobre JS y la web.
<!doctype html> <html> <script> window.onload = function() { function randomColor() { let color = []; for (let i = 0; i < 3; i++) { color.push(Math.floor(Math.random() * 256)); } return 'rgb(' + color.join(', ') + ')'; } document.querySelector('.c-link').addEventListener("mouseover", function() { document.querySelector('a').style.color = randomColor(); }); } </script> </head> <body> <div class="c-text__layer"> <div class="c-text">Lorem ipsum dolor sit amet consetetur,<br> sadipscing elitr, <a class="c-link" href="https://stackoverflow.com/"> sit amet dolor</a></div> </div> </body> </html>