{"id":15296,"date":"2023-08-29T13:00:00","date_gmt":"2023-08-29T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=15296"},"modified":"2023-10-25T13:19:11","modified_gmt":"2023-10-25T11:19:11","slug":"como-identificar-los-botones-clicados-con-javascript","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-identificar-los-botones-clicados-con-javascript\/","title":{"rendered":"C\u00f3mo identificar los botones clicados con JavaScript"},"content":{"rendered":"\n

Puede que necesites saber c\u00f3mo identificar los botones clicados por el usuario con JavaScript<\/strong> para, en funci\u00f3n de ello, realizar unas acciones u otras. En este art\u00edculo te muestro c\u00f3mo hacerlo.<\/p>\n\n\n\n

\u00a1Vamos con ello!<\/p>\n\n\n\n

Introducci\u00f3n<\/h2>\n\n\n\n
\n
\n
\"identificando<\/figure>\n<\/div>\n\n\n\n
\n

Los botones representan un papel fundamental en cualquier desarrollo web<\/a> y, en ocasiones, saber identificar en qu\u00e9 botones en concreto hace clic el usuario puede ser muy \u00fatil para a\u00f1adir funcionalidades a la web.<\/p>\n\n\n\n

Para ello, se pueden usar la funci\u00f3n getElementById()<\/code> para acceder a los botones de una p\u00e1gina, la propiedad textContent<\/code> para guardar su contenido textual o el m\u00e9todo addEventListener()<\/code>, entre otros. En los siguientes puntos te muestro c\u00f3mo usarlos.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Identificando botones mediante identificadores \u00fanicos<\/h2>\n\n\n\n

Una forma com\u00fan de identificar botones<\/strong> (y otros elementos HTML) empleando JavaScript es asign\u00e1ndoles identificadores \u00fanicos mediante el atributo ‘id’. Gracias a ellos, podr\u00e1s acceder f\u00e1cilmente a los botones HTML empleando la funci\u00f3n getElementById()<\/code>, indicando el identificador correspondiente.<\/p>\n\n\n\n

En el siguiente ejemplo, se define un bot\u00f3n en HTML, se accede a \u00e9l y a su contenido textual para posteriormente mostrarlo por consola:<\/p>\n\n\n\n

\n
\n
<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Registro de botones pulsados con JavaScript<\/title>\n<\/head>\n<body>\n    <button id=\"boton\" class=\"botones\">Bot\u00f3n 1<\/button>\n    <script>\n        var boton = document.getElementById('boton');\n        var botonTXT = boton.textContent;\n        console.log(botonTXT);\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"registrar<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Eventos clic y m\u00e9todo addEventListener()<\/h2>\n\n\n\n
\n
\n
Los eventos son acciones o sucesos que ocurren en el navegador<\/strong>, como hacer clic en un elemento. En nuestro caso, trabajaremos con el evento de clic<\/strong>. Para registrar este tipo de eventos, se emplea el m\u00e9todo addEventListener()<\/code>, el cual permite asignar una funci\u00f3n que se ejecutar\u00e1 cada vez que el usuario haga clic en un elemento definido en la funci\u00f3n.<\/p>\n\n\n\n
Este m\u00e9todo toma dos argumentos<\/strong>: el tipo de evento que queremos escuchar y la funci\u00f3n que se ejecutar\u00e1 cuando ese evento ocurra. Su sintaxis b\u00e1sica es la siguiente:<\/p>\n\n\n\n
elemento.addEventListener(evento, funci\u00f3n);<\/code><\/pre>\n\n\n\n