Bonjour,

Je rencontre un problème avec la création d'éléments en pure JS.

Je me base sur le cours -> https://openclassrooms.com/courses/creez-des-pages-web-interactives-avec-javascript/modifiez-la-page-web#/id/r-3612865 

Voici mon code d'essais et il fonctionne bien (simplifié avec un seul attribut data-xxx )

	var new_section = document.createElement("div");
	new_section.id = add_sector;
	new_section.className = "sections";
	document.getElementById("global").appendChild(new_section);
	

	var new_section = document.createElement("p");
	new_section.className = "titre";
	new_section.textContent = "New section";
	document.getElementById(add_sector).appendChild(new_section);
	
	// ** Champ INPUT avec attribut data **
	
	var ajouter = document.createElement("input");
	ajouter.id = add_foo;
	
	// Les attributs Datat-
	
	ajouter.data = "data-clipboard-action = copy";
	
	ajouter.className = "param btn";
	ajouter.value = "Salut";
	document.getElementById(add_sector).appendChild(ajouter);

Mais mes attributs data ne sont pas pris en compte, aucune erreur de la part du navigateur mais ils n'apparaissent pas dans l'inspecteur d'éléments :

 Ce serait facile à faire avec jQuery, mais la il me manque la bonne pratique, chose que je n'arrive pas  à trouver sur le web (et même sur stack overflow)

Notez que même le value du champs INPUT est lui aussi absent...

Si quelqu'un peut me dire ce qu'il manque pour injecter mes attributs data, je lui en serait très reconnaissante 

-
Edité par pipelette13 21 octobre 2017 à 11:33:31

Bonjour,

Pour ajouter un attribut de données, tu dois ajouter les éléments voulu à l'objet dataset via le JavaScript.

Exemple JSFiddle.

-
Edité par Walter O'Brien 21 octobre 2017 à 12:07:21

Coucou,

Merci pour ta réponse.

Oui cela fonctionne, malheureusement cette méthode n'accepte qu'un format .

ajouter.dataset.clipboard = "= copy";

Résultat :

Mais je veux ce type de data (j'utilise un plugin jS)

<input id="foo" class="btn" data-clipboard-action="copy" data-clipboard-target="#foo" type="text" value="1">

Je peux donc bien créer un data-clipboard mais pas de data-clipboard-action

-----------------------------------------------------------------

EDIT: J'ai trouvée, voici comment faire.

ajouter.setAttribute("data-clipboard-action","copy");

résultat :

Me reste le value qui ne veux être créé...

Et bien voilà, même méthode avec setAttribute:

ajouter.setAttribute("value","1");

Merci à toi Walter O'Brien de m'avoir mise sur la piste  

-------------------------------- Dernière question ------------------------

Par contre je ne sais pas quelle méthode choisir pour les ID, Class, etc... ?  niveau mise à jour et compatibilité navigateurs.

Exemple, comme ceci :

ajouter.id = add_foo;

Ou comme cela :

ajouter.setAttribute("id",add_foo);

-
Edité par pipelette13 21 octobre 2017 à 17:25:04

Cela dépend de l'élément HTML que tu vises.

Dans ton cas, étant donné que tous les éléments HTML inplémentent un identifiant, tu peux utiliser l'accès par attribut ou bien par méthode.

Par contre, si l'élément HTML est une div, est que tu souhaites lui donner un attribut name, tu ne pourras pas le faire avec l'accès par attribut puisqu'une div n'implémente pas l'attribut name, seuls les HTMLElementInput et autres éléments similaire l'implémente.

Donc ton code ne plantera pas, mais rien ne se passera. Et si vraiment tu souhaite forcer ce comportement, tu n'auras pas d'autre choix que d'utiliser l'accès par méthode.

"use strict";

var div = document.querySelector("div");
div.name = "test"; // ne modifie pas le DOM
div.setAttribute("name", "test"); // modifie le DOM et ajoute l'attribut "name" à la div

var input = document.querySelector("input");
input.name = "test"; // fonctionne
input.setAttribute("name", "test"); // fonctionne aussi

-
Edité par Walter O'Brien 21 octobre 2017 à 19:23:39

Et bien merci pour toutes ces précisions, je vais pouvoir continuer à rédiger mon CDC et commencer mon projet puisque tous mes scripts d'essais sont fonctionnels (celui-ci était la dernière chose à rendre fonctionnelle, bien que je risque d'en rencontrer d'autre pendant la phase de Dev)

A+ et bonne soirée à toi 

Une autre chose que j'ai oublié de mentionner.

Si tu souhaites avoir un attribut de la forme "data-attribut-perso-super-cool", tu peux utiliser le dataset en utilisant le camelCase.

Exemple JSFiddle.

Merci pour l'astuce, c'est en effet très intéressant et je découvre des techniques qui me seront utiles à un moment donné.

je connais le camelCase, mais juste pour certaines variables ( et nom de fonctions)

Sinon je vois que tu précise :

"use strict";

je jetée un oeil pour en savoir plus, mais est-ce réellement nécessaire ? 

Je te souhaite un bon dimanche malgré la météo 

-
Edité par pipelette13 22 octobre 2017 à 14:21:01

C'est une habitude, ça aide à afficher certains messages d'erreurs par exemple si je déclare une variable en oubliant le mot-clé var (alors que c'est autorisé en mode non-strict et ne déclenche pas d'erreur).

Il y a toute une page de la documentation MDN qui explique tout cela.

Bon dimanche à toi et bon courage pour ton projet.

D'ac merci, mais mon éditeur me l'indique aussi. 

Mais je vais suivre cette recommandation 

ps: et allez l'OM !

-
Edité par pipelette13 22 octobre 2017 à 20:46:58