IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

El�ment plus d�tectable


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre confirm�
    Homme Profil pro
    �tudiant
    Inscrit en
    F�vrier 2016
    Messages
    149
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 24
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : �tudiant

    Informations forums :
    Inscription : F�vrier 2016
    Messages : 149
    Par d�faut El�ment plus d�tectable
    Bonjour !
    je suis en train de programmer toute une librairie permettant un emploi plus facile des �l�ments du DOM.
    Cependant, un probl�me dont je ne trouve pas la source � fait surface il y a quelques heures; une fois que je cr�er deux �l�ments,
    le premier n'est plus d�tect� et il m'est impossible de modifier son innerHTML, son style...

    Voici le code qui semble poser probl�me :

    element.js
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
     
    "use strict";
     
    class Element {
    	constructor(tagName, HTMLContent = "", container = document.getElementsByTagName("body")[0]) {
    		this.tagName = tagName;
    		this.container = container;
    		this.initBody(container);
    		this.contentHandler = new HTMLContentHandler(this);
    		this.styleHandler = new StyleHandler(this);
     
    		this.contentHandler.set(HTMLContent);
    	}
     
    	initBody() {
    		let tmpId = new Id("tmp");
     
    		writeElementIn(this.tagName, [tmpId], "", this.container);
    		this.body = document.getElementById(tmpId.value);
    		tmpId.removeOf(this);
    	}
    }
     
    /* ### FUNCTIONS ### */
     
    function writeSimpleElementInById(tagName, content, elementContainerId) {
    	writeElementInById(tagName, [], content, elementContainerId);
    }
     
    function writeSimpleElementIn(tagName, content, elementContainer) {
    	writeElementIn(tagName, [], content, elementContainer);
    }
     
    function writeElementInById(tagName, attributes, content, elementContainerId) {
    	writeElementIn(tagName, attributes, content, document.getElementById(elementContainerId));
    }
     
    function writeElementIn(tagName, attributes, content, elementContainer) {
    	elementContainer.innerHTML += "<" + tagName + " " + getHTMLCodeFromAttributes(attributes) + ">" + content + "</" + tagName + ">";
    }
    voici deux autres classes qui ne me semble pas �tre la cause du probl�me, mais voil� tout de m�me :


    html_content_handler.js
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     
    "use strict";
     
    class HTMLContentHandler {
    	constructor(element) {
    		this.element = element;
    		this.set("");
    	}
     
    	clear() {
    		this.set("");
    	}
     
    	add(HTMLCode) {
    		this.element.body.innerHTML += HTMLCode;
    	}
     
    	set(HTMLCode) {
    		this.element.body.innerHTML = HTMLCode;
    	}
     
    	get() {
    		return this.element.body.innerHTML;
    	}
    }
    style_handler.js

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
     
    "use strict";
     
    class StyleHandler {
    	constructor(element) {
    		this.element = element;
    	}
     
    	setColors(backgroundColor, color) {
    		this.backgroundColor = backgroundColor;
    		this.color = color;
    	}
     
    	set backgroundColor(color) {
    		this.element.body.style.backgroundColor = color.getCSS();
    	}
     
    	set color(color) {
    		this.element.body.style.color = color.getCSS();	
    	}
     
    	get style() {
    		return this.element.body.style;
    	}
     
    }
    Merci beaucoup de l'attention !

    J'esp�re que l'on aura pas trop de difficult�s � trouver...

  2. #2
    Membre confirm�
    Homme Profil pro
    �tudiant
    Inscrit en
    F�vrier 2016
    Messages
    149
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 24
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : �tudiant

    Informations forums :
    Inscription : F�vrier 2016
    Messages : 149
    Par d�faut
    D�sol�, j'ai oubli� des fichiers indispensables � l'ex�cution de la page :

    color.js

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    "use strict";
     
    class Color {
    	constructor(r, g, b) {
    		this.r = r;
    		this.g = g;
    		this.b = b;
    	}
     
    	getCSS() {
    		return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
    	}
    }
     
    function changeBackgroundColor(color) {
    	body.style.backgroundColor = color.getCSS();
    }
    id.js

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    'use strict';
     
    class Id extends Attribute {
    	constructor(value) {
    		super("id", value);
    	}
    }
    attribute.js

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    "use strict";
     
    class Attribute {
    	constructor(label, value) {
    		this.label = label;
    		this.value = value;
    	}
     
    	removeOf(element) {
    		element.body.removeAttribute(this.label);
    	}
     
    	setAt(element) {
    		element.body.setAttribute(this.label, this.value);
    	}
    }
    initialize.js

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    "use strict";
     
    let body = document.getElementsByTagName("body");
    window.onload = init;
     
    function init() {
    	let button1 = new Button("Bouton1"); // => Bouton1
    	button1.contentHandler.add(" :o)"); // => Bouton1 :o)
    	let button2 = new Button("Bouton2"); // => Bouton2
    	button2.contentHandler.add(" ;o)"); // => Bouton2 ;o)
    	button1.contentHandler.add(" ;o("); // => Bouton1 ;o)
    }
    index.html

    Code HTML : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8"/>
    	<title>Titre de la page</title>
     
    	<script src="inc/element.js"></script>
    	<script src="inc/attribute.js"></script>
    	<script src="inc/id.js"></script>
    	<script src="inc/html_content_handler.js"></script>
    	<script src="inc/style_handler.js"></script>
    	<script src="inc/color.js"></script>
    	<script src="inc/initialize.js"></script>
    </head>
    <body id="body">
    </body>
    </html>

  3. #3
    Expert confirm�
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 100
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activit� : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 100
    Par d�faut
    Il y a beaucoup � examiner, et j�avoue que je n�ai regard� que ton premier code, mais je pense que j�ai d�j� une r�ponse � ton probl�me.

    innerHTML, utilis� en �criture, �crase le contenu d�un �l�ment. M�me si tu l�as copi� avant ou si tu utilises l�op�rateur +=, le contenu sera remplac�, et tu perdras toutes les r�f�rences sur les �l�ments qui �taient dedans. C�est un ph�nom�ne qu�on appelle parfois corruption du DOM, et la m�thode insertAdjacentHTML permet de s�en prot�ger. Pour plus de d�tails, voir insertAdjacentHTML() Enables Faster HTML Snippet Injection.


    Tu as une bonne initiative en voulant cr�er ta propre repr�sentation des structures HTML. C�est un bon exercice de conception, et �a te donnera une bonne compr�hension du DOM. Cependant, avec innerHTML, tu ne vas pas dans une bonne direction. Je te conseille plut�t de te baser sur la m�thode native document.createElement.

    D�autres m�thodes qui pourraient t�int�resser :
    La FAQ JavaScript � Les cours JavaScript
    Touche F12 = la console → l�outil indispensable pour d�velopper en JavaScript !

  4. #4
    Membre confirm�
    Homme Profil pro
    �tudiant
    Inscrit en
    F�vrier 2016
    Messages
    149
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 24
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : �tudiant

    Informations forums :
    Inscription : F�vrier 2016
    Messages : 149
    Par d�faut
    Super, merci beaucoup !

    Il reste cependant un probl�me; je ne trouve pas de fonction s�curis�
    telle que insertAdjacentHTML() servant � remplacer tout le contenue de l'�l�ment...

  5. #5
    Membre confirm�
    Homme Profil pro
    �tudiant
    Inscrit en
    F�vrier 2016
    Messages
    149
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 24
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : �tudiant

    Informations forums :
    Inscription : F�vrier 2016
    Messages : 149
    Par d�faut
    J'ai peut-�tre mal compris; c'est le fait d'ajouter du texte qui peut corrompre ?
    Si c'est �a, je peux utiliser l'instruction element.innerHTML = "" pour supprimer le contenue !

+ R�pondre � la discussion
Cette discussion est r�solue.

Discussions similaires

  1. El�ments ne s'affichant plus avec Chrome
    Par Zandies dans le forum Balisage (X)HTML et validation W3C
    R�ponses: 1
    Dernier message: 01/08/2017, 00h42
  2. Les PC sont de plus en plus bruyants que faire
    Par plichtal dans le forum Ordinateurs
    R�ponses: 260
    Dernier message: 23/12/2011, 12h28
  3. El�ment le plus souvent dans un tableau
    Par direct dans le forum Algorithmes et structures de donn�es
    R�ponses: 8
    Dernier message: 25/11/2008, 00h06
  4. R�ponses: 3
    Dernier message: 16/12/2002, 16h12
  5. [Datareport] Etat plus large que le papier
    Par SpaceFrog dans le forum VB 6 et ant�rieur
    R�ponses: 5
    Dernier message: 09/09/2002, 11h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo