No estoy muy seguro de por qué el siguiente código no funciona en el navegador. ¿Algunas ideas?
<!DOCTYPE html> <html> <script> function click() { alert("You clicked on a paragraph"); } </script> <body> <p onclick="click()" id="paragraph">This is a paragraph</p> </body> </html> Descubrí cómo hacer lo anterior con la función document.getElementById (ver más abajo).
<!DOCTYPE html> <html> <script> function click() { alert("You clicked on a paragraph"); } </script> <body> <p id="paragraph">This is a paragraph</p> </body> <script> document.getElementById("paragraph").onclick = function() { click(); } </script> </html>Mi pregunta es ¿por qué el primer enfoque no funciona?
Su primera función no funciona porque click() es una función integrada en JavaScript que simula un clic del mouse en un elemento. Aquí hay una demostración . Entonces, cuando hace clic en el párrafo, la función integrada se ejecuta primero en lugar de su función que muestra el mensaje a través de la función de alert()
Dado que su segunda función es una función anónima, se ejecuta sin ningún error.
Para resolverlo, simplemente cámbiele el nombre a cualquier otro nombre excepto el nombre de una función integrada . Consulte el fragmento de código a continuación, por ejemplo.
<!DOCTYPE html> <html> <body> <script> function alertOnclick() { alert("You clicked on a paragraph"); } </script> <p onclick="alertOnclick()" id="paragraph"> This is a paragraph </p> </body> </html>Revisé su código @ sb2021
Creo que está bien resuelto por @rifkyniyas
Pero me gustaría darte una sugerencia. Intente colocar las inclusiones de la etiqueta del script justo antes del cierre de la etiqueta del cuerpo. La colocación de guiones en la parte inferior del elemento mejora la velocidad de visualización, ya que la interpretación de los guiones ralentiza la visualización.
Algo como esto
<body> . . . . . . <script>...</script> </body>