Discussion :

[Fouko]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Watilin]

Bonsoir,

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

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

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

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

[Fouko]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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

[Fouko]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[Invité]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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"...

[Fouko]

Merci Watilin,

Le code fonctionne super.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[Fouko]

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.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

N.B. Au fait, c'est <input type="text", pas <input type="input"...

[Invité]

Montre-nous un vrai exemple de texte à remplir.

[Fouko]

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

[Invité]

1- Voici une solution :

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

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
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();
}

[Fouko]

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

[Invité]

En fait, il en fait 7 :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Fouko]

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