El atributo de evento onclick en HTML funciona cuando el usuario hace clic en el botón. Cuando el mouse hace clic en el elemento, se ejecuta el script.
Sintaxis:
<element onclick = "script">
Valor de atributo: este atributo contiene un script de valor único que funciona cuando se hace clic con el mouse en el elemento.
Etiquetas compatibles: este atributo es compatible con todas las etiquetas HTML excepto <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style > y <título>.
Ejemplo 1: este ejemplo muestra el evento onClick simple donde se hace clic en el botón para mostrar la fecha y la hora en HTML.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>GeeksforGeeks</h2>
<h3>onClick Event Attribute</h3>
<span>Click the button to see the date & time.</span>
<button onclick="getElementById('time').innerHTML= Date()">
Show Date
</button>
<p id="time"></p>
</body>
</html>
Producción:
Atributo de evento onclick HTML
Ejemplo 2: en este ejemplo, cuando se haga clic en «Haga clic aquí», se mostrará el texto «Bienvenido a GeeksforGeeks».
HTML
<!DOCTYPE HTML>
<html>
<head>
<title> onclick event attribute </title>
<script>
/* If onclick event call then
this script will run */
function onclick_event() {
document.getElementById("geeks").innerHTML =
"Welcome to GeeksforGeeks!";
}
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>onClick Event Attribute</h3>
<!-- onclick event call here -->
<p id="geeks" onclick="onclick_event()">
Click Here
</p>
</body>
</html>
Producción:
llamada de evento onclick para ejecutar el script usando el atributo de evento onclick
Ejemplo 3: En este ejemplo, hemos usado la etiqueta del botón para llamar al evento.
HTML
<!DOCTYPE html>
<html>
<head>
<title> onclick event attribute </title>
<script>
document.getElementById("geeks").addEventListener("click", functionClick);
function functionClick() {
document.getElementById("geeks").innerHTML =
"Welcome to GeeksforGeeks!";
}
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>onClick Event Attribute</h3>
<!-- onclick event call here -->
<button onclick="functionClick()"> Click Here </button>
<p id="geeks"></p>
</body>
</html>
Producción:
llamada de evento onclick con etiqueta de botón usando el atributo de evento onclick
Navegador compatible:
- Google Chrome 93.0 y superior
- Microsoft Edge 93.0
- Firefox 93.0 y superior
- Safari 14.1
- Ópera 79.0
Publicación traducida automáticamente
Artículo escrito por PERIYANAYAKI y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA