2

Tengo, en mi html unos elementos con atributos que necesito tener en el js.

Lo que intento hace es tratar de mandar esos atributos del elemento, como parametro y usarlos en el js.

Primero entente así:

<div id="main" nombre="Nombre Apellido" onclick="print(nombre)"></div>


Después así:

<div id="main" nombre="Nombre Apellido" onclick="print(this.nombre)"></div>


Tambien intenten abriendo las comillas y ponendile + para concatenar, y tampoco. Actualmente lo tengo implementado como el siguiente ejemplo:

function print(str){
  console.log(str.getAttribute('nombre'));
}
#main{
  border: solid 1px black;
  width: 50px;
  height: 50px;
}
<div id="main" nombre="Nombre Apellido" onclick="print(this)"></div>

Mi pregunta es: Existe alguna otra forma de pasar atributos por parametro mejor q la manera q lo estoy haciendo?

11
  • No entiendo que es lo que tratas de hacer. Podrías explicar un poco mas?
    – Fran Islas
    Commented el 6 feb. 2019 a las 16:14
  • Bien, deja q edito
    – So Arca
    Commented el 6 feb. 2019 a las 16:14
  • ahi se entiende mejor?
    – So Arca
    Commented el 6 feb. 2019 a las 16:17
  • 1
    @PHPMyguel por poder, puede añadir un atributo custom sin tener que inicializar por data- pero es preferible como comento en mi respuesta
    – tevvek
    Commented el 6 feb. 2019 a las 16:24
  • 1
    Tienes razón @dteterevkov es la primera vez que lo veo, anodadado me hallo.
    – phpMyGuel
    Commented el 6 feb. 2019 a las 16:29

2 respuestas 2

3

La manera en la que haces funciona y está bien. A pesar de ello, tengo un par de consejos que pueden mejorar tu código:

  1. Los atributos privados que añadas a los elementos deberían llamarse data-, en este caso, data-nombre. Por convenio y mejor legibilidad.
  2. Separaría la lógica de JS de la estructura de HTML, es decir, no usaría onclick si no que lo haría de la siguiente manera:

(() => {
  document.getElementById("main").addEventListener("click", (el)=> {
    console.log(el.target.getAttribute("nombre"));
    
    });
})();
#main{
  border: solid 1px black;
  width: 50px;
  height: 50px;
}
<div id="main" nombre="Nombre Apellido"></div>

3
  • Comprendo, gracias por los consejos. La idea de traer el elemento con un getElementById también la pensé, pero quería saber si se podia enviar desde el html, ahora lo del data- solo sirve como estándar, y para mejorar la lectura? o tiene alguna funcionalidad?
    – So Arca
    Commented el 6 feb. 2019 a las 16:28
  • 1
    @SArca es para evitar "hacks" como lo es crear un atributo que no "toca" en un elemento. Recomiendo la siguiente lectura: developer.mozilla.org/es/docs/Learn/HTML/como/… Como allí dice, si quieres evitar usar la función getAttribute puedes acceder a todo aquello que esté definido como data- mediante la propiedad dataset.
    – tevvek
    Commented el 6 feb. 2019 a las 16:30
  • 1
    Excelente, buen link ademas. Me anoto tus consejos. Gracias.
    – So Arca
    Commented el 6 feb. 2019 a las 16:32
2

Hay una forma mejor: el dataset de HTML5:

Supongamos que tenemos un elemento del que queremos guardar datos extra:

<ul>
<li>Pablo</li> <!-- Usuario 1, con rol ADMIN -->
<li>Pedro</li> <!-- Usuario 2, con rol USER -->
<li>Joaquín</li> <!-- Usuario 12, con rol ADVANCED_USER -->
</ul>

Así que queremos meter esos datos que están comentados en el HTML:

let items= document.getElementsByTagName('li');

for (let i=0;i<items.length;i++) {
  items[i].addEventListener('click', function(event) {
    const element=event.currentTarget;
    const datos=element.dataset;
    console.log('Has clicado en el usuario',datos.id,'con permisos de', datos.role);
  });
}
<ul>
  <li data-id="1" data-role="ADMIN">Pablo</li> <!-- Usuario 1, con rol ADMIN -->
  <li data-id="2" data-role="USER">Pedro</li> <!-- Usuario 2, con rol USER -->
  <li data-id="12" data-role="ADVANCED_USER">Joaquín</li> <!-- Usuario 12, con rol ADVANCED_USER -->
</ul>

1
  • 1
    Bien, es como decía el link de la otra respuesta, mejorando el ejemplo. Gracias
    – So Arca
    Commented el 6 feb. 2019 a las 16:40

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.