Cómo detectar botones con JavaScript

Escrito por rachel smith | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • E-mail

JavaScript puede interactuar con los elementos HTML de una página web utilizando el concepto conocido como Modelo de Objeto de Documento HTML, o DOM. JavaScript puede detectar todos los botones de tu página, incluidos todos los elementos "input" (de entrada) con el atributo "type" (tipo) configurado como "button" (botón), todos los elementos "button" (botón) y cualquier otro elemento con una clase personalizada que lo defina como un botón. También puede detectar si los elementos HTML, incluidos los botones, han sido pulsados. No es difícil determinar un método JavaScript que devuelva una lista con todos los elementos de botón de una página cuando se pulsa un botón.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Utiliza "window.onload" para que el código se ejecute después de que se haya cargado el modelo de objeto de documento, ya que no queremos que nuestro JavaScript haga referencia a objetos que aún no existen: window.onload=function(){

  2. 2

    Haz una lista de todos los elementos "input" (de entrada) con el atributo "type" (tipo) configurado como "button" (botón): buttons = new Array(); inputElements = document.getElementsByTagName("input"); for(i=0; i<inputElements.length; i++){ if(inputElements[i].type=="button"){ buttons.push(inputElements[i]); } }

  3. 3

    Añade todos los elementos "button" (botón) a la lista: inputElements = document.getElementsByTagName("button"); for(i=0; i<inputElements.length; i++){ buttons.push(inputElements[i]); }

  4. 4

    Encuentra el resto de elementos que deben ser añadidos a la lista "buttons" comprobando si su atributo "class" (clase) está configurado con "myButtons". Esto te permitirá seleccionar manualmente los elementos HTML que deben tratarse como botones configurando su atributo "class" (clase). inputElements = document.getElementsByClassName("myButtons"); for(i=0; i<inputElements.length; i++){ buttons.push(inputElements[i]); }

  5. 5

    Si quieres que JavaScript detecte si se ha pulsado un botón, asigna de manera dinámica una función al manejador del evento "onclick" para cualquier elemento HTML que quieras que JavaScript detecte como un botón. Utilizar el manejador del evento "onclick" con "getElementById" cambiará el elemento HTML con el atributo "id" correspondiente en un botón que lanza la función JavaScript. Utiliza la última línea de JavaScript para cerrar la función "window.onload" del paso 1: document.getElementById("theButton").onclick=function(){ alert("There are "+buttons.length+" buttons on this page.") } }

    Este es el documento HTML completo, con el JavaScript incluido: <html> <head> <title>Detect Buttons With JavaScript</title> <script type="text/javascript"> window.onload=function(){ buttons = new Array(); inputElements = document.getElementsByTagName("input"); for(i=0; i<inputElements.length; i++){ if(inputElements[i].type=="button"){ buttons.push(inputElements[i]); } } inputElements = document.getElementsByTagName("button"); for(i=0; i<inputElements.length; i++){ buttons.push(inputElements[i]); } inputElements = document.getElementsByClassName("myButtons"); for(i=0; i<inputElements.length; i++){ buttons.push(inputElements[i]); } document.getElementById("theButton").onclick=function(){ alert("Hay "+buttons.length+" botones en esta página.") } } </script> </head> <body> <input type="button" value="Este botón te dirá cuántos botones hay la página." id="theButton" /> <input type="button" value="Este es un elemento de botón de entrada adicional." /> <input type="text" value=" Esta es una etiqueta de entrada que no es un botón /> <button> Esta es una etiqueta de botón.</button> <a href="#" class="myButtons"> Esta es una etiqueta anclada detectada como botón debido a su nombre.</a> </body> </html>

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles