innerHTML += et innerHTML -=

Bonjour,

dans une fonction je génère des lignes en utilisant
objet.innerHTML += '<...code html.............<br>'

ca marche très bien dans ce sens, les lignes s'ajoutent,
par contre je cherche maitenant à faire un bouton
"annuler dernier ajout"

et pensait faire un:
objet.innerHTML -= " "

pour par exemple mettre un espace vide à la place, ca ne marche pas,
j'obiens l'erreur NaN.

Auriez-vous une idée pour faire marcher ça?
(mettre un espace blanc ou virer carrément la ligne, ou l'élement? p-e en spécifiant son name ou id?)

merci d'avance.

effectivement...

Dans le contexte dans lequel tu utilises tes opérateurs,
+ est un opérateur de chaine (concaténation) alors que,
- est l'opérateur de soustraction...

le plus simple peut être, serait de garder dans une variable la valeur que tu veux ressortir...

Code:

---

1 2 3

oldInner = objet.innerHTML; objet.innerHTML += '<...code html.............<br>'

---

et quand tu en as besoin...

Code:

---

1 2	objet.innerHTML = oldInner;

---

je ne connais pas le volume des données que tu veux insérer, mais si tu penses que c'est trop volumineux de garder ~2 fois le contenu, tu peux effectivement rajouter ton contenu dans des balises avec un id que tu stockes par exemple dans une variable lastInsertId (ca remplace le oldInner de mon premier exemple)

Ensuite, cet id te permettra de pouvoir manipuler l'élément grace aux méthodes que proposent le DOM...
Et si tu fais comme ca, tant que tu y es, insère aussi tes noeuds par le DOM plutot que par innerHTML qui ne fait pas partie des standards...

voici un cas d'application concret du truc:
je génère des input ayant des valeurs différentes à chaques fois,
(selon l'action utilisateur) et je les affiche pour vérification
(une fois que j'aurais tout fait, je compte mettre le input en hidden, pour le transmettre à php incognito)

code d'insertion de la balise:

Code:

---

zone.innerHTML += '<input name="punct'+numero_pt+'" id="punct'+numero_pt+'" type="text" value="'+C.value+'" <br> />';

---

tout ceci ce place dans le div correspondant:

Code:

---

<div id="zone"></div>

---

L'iddée du oldInner est une bonne idée, par contre si l'user
veut 30 valeurs, il faut que je génère un tableau avec les valeurs.
Faisable? je pense, mais il faut voir la taille des données.

Mais le problème étant que à l'affichage, cela n'efface pas l'input d'avant.
Bon au pire, je me suis dit que l'affichage m'importe peu, et que
comme on a décalé le innerHTML "d'un en avant", le prochain input
se ferait par dessus, mais ce n'est pas le cas:
la valeur affichée l'est après.

Donc si j'ai fait 3 input,
j'en "vire" un (inner=oldinner),
et j'en rajoute un (action du user)

je devrais avoir 3 valeurs, mais j'en ai 4 affichées....

voici ce que je te propose et qui me semble finalement plus simple...

Bien sur ce code est à adapter pour éviter certains efets de bord (on ne doit pas pouvoir annuler avant d'avoir inséré le premier input)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

lastInsertId = 0; myZone = getElementById('zone');   //pour rajouter ton input lastInsertId++; myField = document.createElement('input'); myField.type = 'text'; myField.name = 'punct_' + lastInsertId; myField.id = 'punct_' + lastInsertId; myField.value = C.value; // c'est ici que tu ajoute réellement le input au document myZone.appendChild( myField );   //pour enlever le dernier input rajouté lastInsertId--; myZone.removeChild( 'punct_' + lastInsertId );

---

cette alternative devrait effectivement marcher!
J'avais déjà vu l'équivalent DOM du innerHTML dans un site
(JDN developpeurs), mais ne connaissait pas l'existence
de removeChild.

Du coup je vais adapter, et tester tout ça :)

Merci, encore!