Ejemplo
Ejecutar un JavaScript cuando se hace clic en un botón:
<button onclick="myFunction()">Click me</button>
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El evento onclick se produce cuando el usuario hace clic sobre un elemento.
Soporte del navegador
| Evento | |||||
|---|---|---|---|---|---|
| onclick | Sí | Sí | Sí | Sí | Sí |
Sintaxis
En HTML:
En JavaScript:
object .onclick=function(){ Inténtalo tú mismo " En JavaScript, utilizando el addEventListener() método:
object .addEventListener("click", myScript );
Inténtalo tú mismo " Nota: El addEventListener() método no es compatible en Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| burbujas: | Sí |
|---|---|
| cancelable: | Sí |
| Tipo de evento: | MouseEvent |
| etiquetas HTML admitidas: | Todos los elementos HTML, excepto: <base>, <BDO>, España, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> |
| DOM Versión: | Nivel 2 Eventos |
Más ejemplos
Ejemplo
Haga clic en un <button> elemento para mostrar el día actual, la fecha y la hora:
<button onclick="getElementById('demo').innerHTML=Date()">What
is the time?</button>
Inténtalo tú mismo " Ejemplo
Haga clic en un <p> elemento para cambiar su color a rojo texto:
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Inténtalo tú mismo " Ejemplo
Otro ejemplo de cómo cambiar el color de un <p> elemento haciendo clic sobre ella:
<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text
color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
Inténtalo tú mismo " Ejemplo
Haga clic en un botón para copiar un texto de un campo de entrada a otro campo de entrada:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Inténtalo tú mismo " Ejemplo
Asignar el "onclick" eventos al objeto ventana:
window.onclick = myFunction;
// If the user clicks in the window, set
the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Inténtalo tú mismo " Ejemplo
Usando onclick para crear un botón desplegable:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
Inténtalo tú mismo " Páginas relacionadas
Referencia HTML DOM: caso ondblclick
Referencia HTML DOM: caso onMouseDown
Referencia HTML DOM: caso onmouseup
<Objeto de evento