1

Tengo 5 labels diferentes. Necesito que al hacer click en cada una se dispare una funcion que reciba como parametro el texto de la label. Tengo algo asi:

    <div>
      <ion-text
        class="ux-font-lato ux-fweight-semibold ux-fsize-14"
        color="uxsemidark"
      >
        24 horas
      </ion-text>
    </div>
    <div>
      <ion-text
        class="ux-font-lato ux-fweight-semibold ux-fsize-14"
        color="uxsemidark"
      >
        7 días
      </ion-text>
    </div>
    <div>
      <ion-text
        class="ux-font-lato ux-fweight-semibold ux-fsize-14"
        color="uxsemidark"
      >
        30 días
      </ion-text>
    </div>
    <div>
      <ion-text
        class="ux-font-lato ux-fweight-semibold ux-fsize-14"
        color="uxsemidark"
      >
        90 días
      </ion-text>
    </div>
    <div>
      <ion-text
        class="ux-font-lato ux-fweight-semibold ux-fsize-14"
        color="uxsemidark"
      >
        Todo
      </ion-text>
    </div>

Y la funcion es simple:

function imprimir(label) {
  alert(label)
}

Gracias!

3
  • ¿Qué es tener 5 labels diferentes? ¿Cada "label" es una etiqueta <ion-text>? ¿Quieres hacerlo usando el marco de trabajo Ionic o prefieres javascript puro? Commented el 24 nov. 2020 a las 14:37
  • Si, exactamente.
    – ZottoSL
    Commented el 24 nov. 2020 a las 14:40
  • Hecho. Espero que la respuesta sea de tu agrado. Si no funciona o tienes dudas déjame un comentario en ella. Commented el 24 nov. 2020 a las 14:54

1 respuesta 1

1

Basta con agregar a cada elemento un evento click mediante addEventListener() y, posteriormente, pasar a tu función el contenido (innerText) del elemento pulsado:

/* Tu función */
function imprimir(label) {
  alert(label)
}

/* Buscamos los elementos */
document.querySelectorAll('ion-text').forEach(elemento => {
  /* A cada elemento le agregamos un evento al hacer clic */
  elemento.addEventListener('click', evento => {
    /* Que llamará a tu función con el contenido en texto del elemento */
    imprimir(evento.target.innerText); /* Usando el evento */
    imprimir(elemento.innerText); /* Usando el elemento iterado */
  })
});
/* Cambiamos un poco la apariencia de cada elemento */
ion-text {
  border: 1px solid black;
  border-radius: 2px;
}
<div><ion-text>24 horas</ion-text></div>
<div><ion-text>7 días</ion-text></div>
<div><ion-text>30 días</ion-text></div>
<div><ion-text>90 días</ion-text></div>
<div><ion-text>Todo</ion-text></div>

1
  • 1
    Excelente, muchas gracias!
    – ZottoSL
    Commented el 24 nov. 2020 a las 15:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.