texte d'affichage du tableau dans les balises étiquette html avec id unque en utilisant javascript

Question

je suis nouveau en javascript, j'ai le code html suivant:

<form role="form" >  
<label for="element1" id="element1_label"></label> 
<input type="text" id="element1" /> 

<label for="element2" id="element2_label"></label> 
<input type="text" id="element2" name="element2"> 

<label for="element3" id="element3_label"></label> 
<input type="number" id="element3" name="element3s"> 

<button type="submit" >submit</button> 

et je veux afficher un texte de tableau options en suivant le code javascript:

 var piced = 'opt'; 
     var options = { 
      opt: { 
       element1_label: "text1", 
       element2_label: "text2", 
       element3_label: "text3", 
      }, 
      newopt: { 
       element1_label: "new text1", 
       element2_label: "new text2", 
       element3_label: "new text3", 
      } 
     }; 

     jQuery('label').each(function() 
     { 
      jQuery(this).innerText = options[piced][jQuery(this).attr('id')]; 

     }); 

je veux afficher dans chaque valeur de l'étiquette html de cet indice de tableau piced. par exemple:

<label for="element1" id="element1"> text1 </label> 
<input type="text" id="element1" /> 

<label for="element2" id="element2"> text2 </label> 
<input type="text" id="element2" name="element2"> 

mais ce code ne change le texte de tags.what étiquette est le problème?

Answer 1

innerText est une propriété native, pas une propriété jQuery. L'équivalent jQ est la méthode text(). Changer soit:

jQuery(this).text(options[piced][jQuery(this).attr('id')]); 

ou (récupérer la référence de l'élément natif de la pile jQuery)

jQuery(this)[0].innerText = options[piced][jQuery(this).attr('id')]; 

Answer 2

Voici une approche Javascript vanille qui fait une boucle à travers les étiquettes et écrit le textContent de chaque étiquette (labels[i].textContent) comme:

options[piced][labels[i].id]; 

var piced = 'opt'; 
 

 
var options = { 
 
    
 
    opt: { 
 
     element1_label: "text1", 
 
     element2_label: "text2", 
 
     element3_label: "text3", 
 
    }, 
 

 
    newopt: { 
 
     element1_label: "new text1", 
 
     element2_label: "new text2", 
 
     element3_label: "new text3", 
 
    } 
 

 
}; 
 

 
var labels = document.getElementsByTagName('label'); 
 

 
for (var i = 0; i < labels.length; i++) { 
 
    labels[i].textContent = options[piced][labels[i].id]; 
 
}

<form role="form" >  
 
<label for="element1" id="element1_label"></label> 
 
<input type="text" id="element1" /> 
 

 
<label for="element2" id="element2_label"></label> 
 
<input type="text" id="element2" name="element2"> 
 

 
<label for="element3" id="element3_label"></label> 
 
<input type="number" id="element3" name="element3"> 
 

 
<button type="submit" >submit</button>

---

N.B. Je ne vais pas jusqu'à dire jamais utiliserinnerText - mais il est important de savoir que textContent javascript est standard tout en innerText est non standard (à l'origine une propriété exclusive introduite par Internet Explorer, puis adoptée par WebKit , Blink et Opera).

Voir ce post 2015 Blog:

• Node.textContent (2015) par Mozilla Developer Network
• The poor, misunderstood innerText (2015) par kangax

à saisir pleinement les différences entre textContent et innerText.

---

La solution multi-navigateur (pour gérer les versions existantes de IE) est, bien sûr:

var text = element.textContent || element.innerText;