Comment accéder aux attributs de données en JavaScript : pourquoi « this.typeId » ne fonctionne pas et comment utiliser « dataset » à la place ?

Obtention d'attributs de données en JavaScript

Dans les éléments HTML, les attributs de données constituent un moyen pratique de stocker des informations supplémentaires. Cependant, accéder à ces attributs en JavaScript peut s'avérer délicat. Examinons un problème spécifique et explorons sa solution.

Le défi

Considérez le code HTML suivant :

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

En JavaScript, notre objectif est de récupérer ces attributs de données. et utilisez-les dans un objet JSON, comme indiqué ci-dessous :

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.typeId),
    subject: this.datatype,
    points: parseInt(this.points),
    user: "H. Pauwelyn"
  });
});</code>

Cependant, tenter d'accéder aux attributs de données à l'aide de this.typeId, this.datatype et this.points donne null.

La solution

Pour accéder aux attributs de données en JavaScript, il faut utiliser la propriété dataset. Voici le code modifié qui atteint notre objectif :

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});</code>

L'objet JSON résultant contiendrait les données souhaitées :

<code class="json">{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }</code>

En tirant parti de la propriété dataset, nous pouvons récupérer sans effort les attributs de données dans JavaScript, nous permettant d'utiliser leurs valeurs dans notre code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!