Puedo obtener el valor de id
pero data-id
muestra este error,
Uncaught ReferenceError: id is not defined
Mi código,
<ul id="highscores"></ul> <script> var hst = document.getElementById("highscores"); var highScores = [ { id: "1",name: "Maximillian", score: 1000 }, { id: "2",name: "The second guy", score: 700 }, { id: "3",name: "The newbie!", score: 50 } ]; function deleteById ( self ){ console.log(self.id); console.log(self.data-id); } for (var i = 0; i < highScores.length; i++) { hst.innerHTML += "<li >" +"<a data-id='test' id="+highScores[i].id + " href='#' onclick='deleteById(this)'>x</a>" + highScores[i].name + " -- " + highScores[i].score + "</li>"; } </script>
Las propiedades y los atributos son dos cosas separadas. El atributo data-id
que ha definido no se correlaciona automáticamente con una propiedad en ese elemento. De manera similar, por ejemplo, un <input type="text">
puede tener un atributo de value
, pero la propiedad de value
en él no necesariamente le da el valor de ese atributo, ya que la propiedad de value
apunta a lo que está actualmente en la entrada, mientras que el atributo de value
es su valor inicial. Trate de separar estos dos conceptos.
Sin embargo, para responder a su pregunta; hay dos maneras. Una es usar element.getAttribute('data-id')
. Esto funciona para cualquier atributo. Sin embargo, los atributos data-*
obtienen su propia forma elegante de leer y escribir sus valores; la propiedad del conjunto de dataset
. Por ejemplo, para acceder a la propiedad data-id
, puede usar element.dataset.id
. De manera similar, para acceder al atributo data-foo-bar
, puede usar element.dataset.fooBar
.
TLDR: use element.dataset.id
o element.getAttribute('data-id')