Puedo obtener el valor de id pero data-id muestra este error,
Uncaught ReferenceError: id is not definedMi 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')