1

Tal vez esta sea una pregunta tonta, pero por mucho q he buscado no he dado con el tema.

Supongamos q tengo un Datatable lleno de información, con el típico botón editar.

Mi pregunta es con JavaScript vanilla como puedo remplazar el $(this).attr("XXXXXX")); de Jquery.

Quiero obtener todos los atributos del elemento que hizo click pero con JS Vanilla.

 $(document).on("click", ".btnVerProveedores", function () {

    console.log($(this).attr("ATO_EMP_EMPRESA"));        
    
 }

De antemano, gracias.

3 respuestas 3

1

No entendí muy bien tu pregunta pero si lo que quieres es cambiar tu código actual a JS nativo entonces debes hacer lo siguiente:

function verDetalle(boton){
  console.log(boton.getAttribute('miatributo'));
}
<button class="botones" onclick="verDetalle(this)" type="button" miatributo="botón 1">botón 1</button>
	<button class="botones" onclick="verDetalle(this)" type="button" miatributo="botón 2">botón 2</button>
	<button class="botones" onclick="verDetalle(this)" type="button" miatributo="botón 3">botón 3</button>
	<button class="botones" onclick="verDetalle(this)" type="button" miatributo="botón 4">botón 4</button>

3
  • Por aquí va el tema Bender Paisa, gracias por tu respuesta. Pruebo y les informo. Commented el 24 may. 2019 a las 13:45
  • Me funciono esta propuesta, intente no escribir condigo JavaScript en el HTML pero bueno, lo importante es ir dejando la dependencia del JQuery y esta solución me funciono a la perfección, muchas gracias. Commented el 24 may. 2019 a las 15:38
  • @anRoswellHarrisMaiden me alegra que te sirviera, lastimosamente si no querías ejecutar el evento desde el HTML si te tocaba hacer un each de los elementos, saludos! Commented el 24 may. 2019 a las 15:46
0

primero seleccionas el elemento del dom que quieres y le añades el evento tal como $(document).on() pero con document.getElementById(), basicamente el elemento que quieras que tena la funcion.

en la funcion, ya sea que se la pases por referencia o utilises una anonima, pasale como parametro e de evento, y adentro de la función accedes al elemento y a sus atributos con event.target.attributes. Te regresara la lista de los atributos, para acceder a su valor puedes hacerlo de muchas maneras, pero la manera directa es evento.target.attributes.ATO_EMP_EMPRESA.value, por ejemplo.

document.getElementById("btn").addEventListener("click", (e) =>{
    console.log(e.target.attributes)
 });
2
  • Gracias por tu respuesta Black Hole, tu solución va enfocado a la interacción con un solo elemento del Dom, te agradezco tu respuesta. Commented el 24 may. 2019 a las 13:46
  • puedes hacer este proceso dinamico, hacer una funcione para obtener el atributo de cualquier dom que insertes, es cuestion de jugar un poco con los valores, espero que encuentres tu solucion :D Commented el 24 may. 2019 a las 14:19
0

En primer lugar, lo que debes hacer para añadir un evento a un elemento es seleccionarlo. Los últimos estándares de JavaScript ya incluyen los métodos .querySelector(selector) y .queryselectorAll(selector) que devuelven respectivamente el primer elemento y todos los elementos que coincidan con el selector. Estos métodos aceptan los mismos selectores que jQuery, así que podrías seguir usando .btnVerProveedores De esta forma teniendo este código

const boton = document.querySelector('button');
const botones = document.querySelectorAll('button');

console.log('con querySelector', boton);
console.log('con querySelectorAll', botones);
<button>Mi Botón</button>
<button>Mi Segundo Botón</button>

La variable boton te devolverá sólo el primer botón y la variable botones te devolverá una colección de nodos con los dos botones.

Lo siguiente que tienes que hacer es añadir un eventListener al elemento que quieras.

Si sólo tienes un elemento es sencillo, con element.addEventListener('evento', callback) estaría listo. Si lo que tienes es una colección de elementos tendrás que iterar y añadir ese callback a cada uno de los elementos.

De nuevo, te dejo un ejemplo.

const button = document.querySelector('button');
const buttons = document.querySelectorAll('button');

// Si sólo tienes un elemento (variable button)
button.addEventListener('click', function() {
  const innerText = this.innerText;
  console.log('Un solo elemento', innerText)
});

// Si tienes una colección de elementos (variable buttons)

buttons.forEach(buttonInList => {
    buttonInList.addEventListener('click', function() {
      const innerText = this.innerText;
      console.log('Varios elementos', innerText)
    });
  }
);
<button>My Button 1</button>
<button>My Button 2</button>
<button>My Button 3</button>
<button>My Button 4</button>
<button>My Button 5</button>
<button>My Button 6</button>
<button>My Button 7</button>
<button>My Button 8</button>

Y para terminar, el acceso a un atributo de un elemento se hace mediante getAttribute(nombreDeAtributo).

Como ejemplo puedes usar esta pieza de código:

const button = document.querySelector('button');

button.addEventListener('click', function() {
  const myAttributeValue = this.getAttribute('my-attribute');
  console.log(myAttributeValue)
})
<button my-attribute="my-value">SOY UN BOTÓN</button>

Habiendo visto todo esto, podemos hacer la aproximación al problema que planteas:

const buttons = document.querySelectorAll('.myClass') // equivalente a $('.myClass')

// equivalente a $(document).on('click', buttons, function() {...});
buttons.forEach(button => {
  button.addEventListener('click', function() {
    const myAttributeValue = this.getAttribute('my-attribute');
    console.log(myAttributeValue)
  })
})
<button class="myClass" my-attribute="valor 1">BOTON 1</button>
<button class="myClass" my-attribute="valor 2">BOTON 2</button>
<button class="myClass" my-attribute="valor 3">BOTON 3</button>
<button class="myClass" my-attribute="valor 4">BOTON 4</button>
<button class="myClass" my-attribute="valor 5">BOTON 5</button>
<button class="myClass" my-attribute="valor 6">BOTON 6</button>
<button class="myClass" my-attribute="valor 7">BOTON 7</button>
<button class="myClass" my-attribute="valor 8">BOTON 8</button>
<button class="myClass" my-attribute="valor 9">BOTON 9</button>
<button class="myClass" my-attribute="valor 10">BOTON 10</button>

Con esto deberías poder hacer lo que planteas adaptándolo a tus necesidades.

3
  • Compañero @Fernando Carrascosa muchas gracias por tu respuesta, me inquieta la solución q' propones debo siempre recorrer todos los elementos de la tabla para poder encontrar los atributos q' requiero acceder, imagínate fueran 5.000 elementos. Probare y les estaré comentando, muchas gracias. Commented el 24 may. 2019 a las 13:43
  • La cosa es que al final haces lo mismo que si los haces con el atributo onclick, pero eso ya es cuestión de estilos. Vas a añadir 5000 eventListeners en cualquiera de los dos casos. Commented el 24 may. 2019 a las 22:00
  • No compañero una sola función y ya... Commented el 26 may. 2019 a las 1:06

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.