evento onclick
Ejemplo
Ejecute un JavaScript cuando se haga clic en un botón:
<button onclick="myFunction()">Click me</button>
Definición y uso
El onclickevento ocurre cuando el usuario hace clic en un elemento.
En HTML:
<element onclick="myScript">
En JavaScript:
object.onclick = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("click", myScript);
Detalles técnicos
| Burbujas: | sí |
|---|---|
| Cancelable: | sí |
| Tipo de evento: | RatónEvento |
Etiquetas HTML compatibles : |
Todos excepto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> |
Más ejemplos
Haga clic en un <botón> para mostrar la fecha:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Haga clic en un elemento <h3> para cambiar el color del texto:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Otro ejemplo de cómo cambiar el color de un elemento:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Haga clic para copiar texto de un campo de entrada a otro:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Cómo asignar un evento "onclick" al objeto de la ventana:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Use onclick para crear un menú desplegable:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
páginas relacionadas
Tutorial de JavaScript: Eventos de JavaScript
Referencia HTML DOM: evento ondblclick
Referencia HTML DOM: evento onmousedown
Referencia HTML DOM: evento onmouseup
Compatibilidad con navegador
onclick es una característica DOM Nivel 2 (2001).
Es totalmente compatible con todos los navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |