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 !