Utiliser InnerHtml plusieurs fois

Version imprimable

Bonjour à tous,

Comment faire pour utiliser InnerHtml plusieurs fois.

J'ai un champs dont la valeur doit être utilisée plusieurs fois simultanément, Je ne vois pas comment faire avec InnerHtml
Actuellement je ne peux l'utiliser qu'une seule fois.
Code:

1 2 3 4 5 6 7 8 9 <script> function showMsg(){ var userInput = document.getElementById('userInput').value; document.getElementById('userMsg').innerHTML = userInput; } </script> <input type="input" maxlength="40" id="userInput" onkeyup="showMsg()" placeholder="Enter text here..."> <p id="userMsg"></p>

11/09/2018, 19h47
Watilin

Bonsoir,

je ne vois pas où est le problème. Peux-tu nous donner plus d’informations ?

Citation:

Actuellement je ne peux l'utiliser qu'une seule fois.

:fleche: Que se passe-t-il quand tu essayes de l’utiliser une seconde fois ? Que devrait-il se passer ?

:fleche: Si tu ouvres la console (touche F12 puis onglet « console »), vois-tu un message d’erreur ou d’avertissement ?

je souhaite utiliser ce champs, qui est remplit par l'utilisateur, pour remplir un texte à trous qui utilise plusieurs fois la valeur de ce champs.

Il n'y a pas de message d'erreur dans la console, juste le premier s'affiche, pas les autres
Code:

1 2 <p> Lorem ipsum dolor sit amet, <span id="userMsg"></span> consectetur adipiscing elit. Sed iaculis, <span id="userMsg"></span> elit id finibus posuere, est turpis ullamcorper tortor, <span id="userMsg"></span> nec suscipit nibh leo ac mauris.</p>

11/09/2018, 20h34
melka one

bonjour

un id est unique il faut donner un id a la balise p et utiliser getElementsByTagName pour les span qui retournera une nodelist qui est comparable a un tableau et contenant une référence pour chaque span contenu dans la balise p ensuite on boucle sur la nodeliste afin de modifier la valeur contenu dans chaque span

Merci pour l'orientation, je t'avoue au début la réponse m'a laissé sans voix. Mais en cherchant...
Voici ce que j'ai fait, cela fonctionne, mais n'y a t'il pas mieux ? sachant que je vais avoir 8 champs de saisis comme celui ci.

J'ai utilisé querySelectorAll, je ne vois pas comment faire avec getElementsByTagName pour indiqué les <span> en question
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script> function showMsg(){ var userInput = document.getElementById('userInput').value; document.getElementById('userMsg').innerHTML = userInput; var x = document.querySelectorAll('#userMsg'); var i; for (i = 0; i < x.length; i++) { x[i].innerHTML = userInput; } } </script> <input type="input" maxlength="40" id="userInput" onkeyup="showMsg()" placeholder="Enter text here..."> <p id="test"> Lorem ipsum dolor sit amet, <span id="userMsg"></span> consectetur adipiscing elit. Sed iaculis, <span id="userMsg"></span> elit id finibus posuere, est turpis ullamcorper tortor, <span id="userMsg"></span> nec suscipit nibh leo ac mauris.</p>

12/09/2018, 00h51
Watilin
Tu n’auras pas de résultat fiable tant que tu utiliseras un id. Avec des <span class="userMsg"> et un querySelectorAll('.userMsg') tu peux boucler proprement sur les éléments.

Voici un exemple, qui te montre aussi la syntaxe for … of :
Code:

1 2 3 for (let elem of document.querySelectorAll('.userMsg')) { elem.textContent = userInput; }
Comme tu peux le voir j’ai aussi remplacé innerHTML par textContent, c’est à la fois plus sûr et plus performant. Le défaut de innerHTML est d’analyser toute chaîne que tu lui passes comme du code HTML, il y a donc :
- le coût de l’appel à l’analyseur de code HTML (un analyseur HTML, c’est permissif, ça doit gérer plein de cas exceptionnels, donc c’est lourd) ;
- le risque que du code malveillant (par exemple une balise <script>) soit exécuté à ton insu.
Je suis partisan qu’on banisse définitivement innerHTML et que, seulement quand c’est nécessaire, on utilise insertAdjacentHTML, méthode peu connue qui pourtant existe depuis IE4 !

Bonjour,

peux-tu expliquer CLAIREMENT ce que tu veux faire ?

1- Tel que le le vois actuellement, tu cherches à insérer le MEME texte à plusieurs endroits ?

2- Ou alors plusieurs textes différents ?

Le cas n°1 se résout par (c'est une solution parmi d'autres) :
Code:

1 2 <input type="text" maxlength="40" id="userInput" onkeyup="showMsg()" placeholder="Enter text here..."> <p id="test"> Lorem ipsum dolor sit amet, <span></span> consectetur adipiscing elit. Sed iaculis, <span></span> elit id finibus posuere, est turpis ullamcorper tortor, <span></span> nec suscipit nibh leo ac mauris.</p>
Code:

1 2 3 4 5 6 7 8 function showMsg() { var userInput = document.getElementById("userInput").value; var spans = document.querySelectorAll("#test span"); spans.forEach(function(span,index) { span.textContent = userInput; // on insert LE MEME texte dans chaque span }); }
N.B. Au fait, c'est <input type="text", pas <input type="input"...

12/09/2018, 08h52
Fouko
Merci Watilin,

Le code fonctionne super.
Code:

1 2 3 4 5 6 function Input(){ var userInput = document.getElementById('userInput').value; for (let elem of document.querySelectorAll('.userMsg')) { elem.textContent = userInput; } }
Pour aller plus loin, j'ai 9 champs de saisi comme le userInput, plutôt que de faire des copiers/coller en adaptant l'id pour chaque input, n'y a t'il pas moyen de faire une boucle qui allégerait le code ?

Question pratique, comment fais tu pour mettre sur fond bleu ton texte ?
12/09/2018, 09h07
Fouko
Citation:

Envoyé par jreaux62

1- Tel que le le vois actuellement, tu cherches à insérer le MEME texte à plusieurs endroits ?

2- Ou alors plusieurs textes différents ?

En faite, j'ai les 2 besoins :
1. 9 champs de saisi contenant chacun du texte choisi par l'utilisateur
2. Un long texte dans lequel vont être inséré à de multiple endroit plusieurs fois le contenu des champs de saisi.
Avec ce code on ne peut pas différencier plusieurs span contenu dans #test. Je ne sais pas si je m'exprime correctement.
Citation:
Code:

1 2 3 4 5 var spans = document.querySelectorAll("#test span"); spans.forEach(function(span,index) { span.textContent = userInput; // on insert LE MEME texte dans chaque span }); }
Merci, je corrige.

Citation:

N.B. Au fait, c'est <input type="text", pas <input type="input"...
12/09/2018, 09h16
Invité

Montre-nous un vrai exemple de texte à remplir.
12/09/2018, 09h25
Fouko

Citation:

Envoyé par jreaux62

Montre-nous un vrai exemple de texte à remplir.

Hélas le texte est sous copyright, je vais me faire allumer. Disons que ce donnerait :

Champs 1 : mes voisins et ma soeur
Champs 2 : mal de tête

A chaque fois que mes voisins et ma soeur me parlent j'ai un mal de tête. Ce mal de tête, ne me permet pas d'être décontracté toute la journée.
Pour ne plus avoir ce mal de tête il faut que je prenne de la distance. Améliorer ma communication avec mes voisins et ma soeur sera bénéfique pour tous.

Cela permet de personnaliser le texte en fonction des réponses de l'utilisateur

1- Voici une solution :

Démo : https://codepen.io/jreaux62/pen/vzRqrx

Code:

1
2
3
4
5
6
7
8
9
10
11
<input type="text" maxlength="40" placeholder="Enter text 1..." onkeyup="showMsg(this.value, 'txt-1');" />
<input type="text" maxlength="40" placeholder="Enter text 2..." onkeyup="showMsg(this.value, 'txt-2');" />
<input type="text" maxlength="40" placeholder="Enter text 3..." onkeyup="showMsg(this.value, 'txt-3');" />
 
<div id="longtext">
  <p>De quibus <span class="txt-1"></span> video sententias ferri, quarum nullam probo, <span class="txt-2"></span> eodem modo erga amicum adfecti simus, quo erga nosmet ipsos, <span class="txt-3"></span> nostra in amicos benevolentia.</p>
 
  <p>illorum erga nos benevolentiae pariter aequaliterque respondeat, <span class="txt-2"></span> , quanti quisque se ipse facit, <span class="txt-1"></span> fiat ab amicis.</p>
 
  <p>Lorem ipsum dolor sit amet, <span class="txt-1"></span> consectetur adipiscing elit. Sed iaculis, <span class="txt-2"></span> elit id finibus posuere, <span class="txt-3"></span> ullamcorper tortor, <span class="txt-1"></span> nec suscipit nibh leo ac mauris.</p>
</div>

Code:

1
2
3
4
5
6
7
#longtext span {
  display: inline-block;
  min-width: 30px;
  min-height: 12px;
  border-bottom: 1px dashed lightblue;
  color:blue;
}

Code:

1
2
3
4
5
6
7
function showMsg( txt, span_class ) 
{
  var spans = document.querySelectorAll('#longtext span.'+span_class);
  spans.forEach(function(span) {
    span.textContent = txt; // on insert LE MEME texte dans chaque span
  });
}

OU (autre syntaxe) :

Code:

1
2
3
4
5
6
function showMsg( txt, span_class ) 
{
  for (let span of document.querySelectorAll('#longtext span.'+span_class)) {
    span.textContent = txt;
  }
}

2- Variante, en pré-remplissant les span par un texte "par défaut" de la forme [text 1], [text 2],... :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function initMsg() 
{
  var spans = document.querySelectorAll('#longtext span');
  spans.forEach(function(span) {
   var txt = span.textContent;
    if( txt == '' )
    {
      // texte par défaut, de la forme : [text 1]
      span.textContent = '['+span.className.replace('txt-','text ')+']';
    }
  });
}
window.onload = function(){
  initMsg('');
}
function showMsg( txt, span_class ) 
{
  var spans = document.querySelectorAll('#longtext span.'+span_class);
  spans.forEach(function(span,index) {
    span.textContent = txt; // on insert LE MEME texte dans chaque span
  });
  initMsg();
}

12/09/2018, 10h26
Fouko

C'est juste extra, hier mon code faisait 99 lignes... aujourd'hui il en fait 8 8O
J'ai encore du boulot.
Vraiment merci.

En fait, il en fait 7 :

Code:

1
2
3
4
5
6
7
function showMsg( txt, span_class ) 
{
  var spans = document.querySelectorAll('#longtext span.'+span_class);
  spans.forEach(function(span) {
    span.textContent = txt; // on insert LE MEME texte dans chaque span
  });
}

(il faut enlever initMsg(), qui fait partie de la variante ;))

On peut encore réduire à 6, avec l'autre syntaxe : 8-)

Code:

1
2
3
4
5
6
function showMsg( txt, span_class ) 
{
  for (let span of document.querySelectorAll('#longtext span.'+span_class)) {
    span.textContent = txt;
  }
}

16/09/2018, 11h34
Fouko

Merci pour ces clarifications, j'ai encore beaucoup à apprendre.