Dev Faq
0
votes

Comment éviter "indéfini" à l'intérieur d'une "boucle" dans JavaScript?

Je change de l'innerhtml avec une boucle pour une boucle, mais certaines valeurs retournent indéfinies car il n'y a pas la même quantité d'instances. Comment puis-je configurer la boucle pour sauter les instances vides?

Ceci doit modifier le contenu de toutes les instances avec la même classe, la quantité d'instances varie de la classe. P> 

<!DOCTYPE html>
<html>
<body>

<p class="TEXT1">000</p>
<p class="TEXT1">000</p>
<p class="TEXT2">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT4">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>


<script>

function CHANGE() {
for (var i = 0; i < 10; i++) {
//"paragraphs" will be different content texts, not just the word with a number.
  document.getElementsByClassName("TEXT1")[i].innerHTML = "Paragraph 1";
  document.getElementsByClassName("TEXT2")[i].innerHTML = "Paragraph 2";
  document.getElementsByClassName("TEXT3")[i].innerHTML = "Paragraph 3";
  document.getElementsByClassName("TEXT4")[i].innerHTML = "Paragraph 4";
  document.getElementsByClassName("TEXT5")[i].innerHTML = "Paragraph 5";
}    
}
CHANGE();
</script>
    </body>
</html>

0 commentaires

6 Réponses :

0
votes

La quantité d'instances varie de la classe.

Vous pouvez vérifier le nombre d'instances. xxx

pour plusieurs classes et textes: xxx

2 commentaires

Sur plusieurs classes et textes, je reçois la ceci: SyntaxExError non décourgué: Jeton inattendu pour la ligne: 3

devrait être corrigé avec les accolades

0
votes

À l'intérieur de votre boucle Vérifiez cette condition 

for(// your loop condition){

      myVar = document.getElementsByClassName("TEXT")[i];

      if (typeof myVar !== 'undefined'){

           continue;

      }


}

0 commentaires
0
votes

Vous devriez plutôt commencer par les noms de classe et rechercher des éléments correspondants. Une fois que vous avez d'autres, vous pouvez utiliser sur eux 

function CHANGE() {
 const classNames = ['TEXT1','TEXT2','TEXT3','TEXT4','TEXT5','TEXT6']
 classNames.forEach(name=>{
    let nodes = document.getElementsByClassName(name)
    let innerText = "Paragraph "+name.replace("TEXT","")
    for(let j=0; j<nodes.length;j++){
      nodes[j].innerHTML=innerText
  }
 }) 
}

0 commentaires
0
votes

Vous ne devriez pas essayer de changer toutes les différentes catégories d'éléments dans une boucle, ni de la longueur de la longueur de la boucle ou de la ré-calculer la liste des éléments dans chaque boucle. Essayez ceci: xxx pré>

puis répétez cela pour chaque classe d'élément que vous souhaitez manipuler. Alternativement, donnez à tous ces éléments une classe supplémentaire, commune, et simplement trouver et boucler les résultats pour cela, en utilisant une expression régulière pour déterminer le nombre. Je vais inclure cet exemple en utilisant la syntaxe ES6, car il est plus complexe de toute façon: P> 

// Each element has the 'paragraph' class; for instance, class="TEXT1 paragraph", class="TEXT2 paragraph", etc.
const elements = document.querySelectorAll('.paragraph');
for (let element of elements) {
    const matcher = element.className.match(/^TEXT(\d+)/i);
    element.innerHTML = `Paragraph ${matcher[1]}`;
}

0 commentaires
0
votes

Chaque fois que vous appelez document.getelementsbyclassname, vous forcez le DOM à trouver et à collecter ces éléments. Cela fait un site Web lent. Essayez quelque chose comme ceci: xxx

0 commentaires
0
votes

Vous essayez d'itérer sur des index qui ne sont pas présents, essayez cet extrait:

p> 

<!DOCTYPE html>
<html>
<body>

<p class="TEXT1">000</p>
<p class="TEXT1">000</p>
<p class="TEXT2">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT4">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>

</body>
</html>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO