Javascript Array et While Loops

Question

Je suis très nouveau pour javascript et j'essaie d'énumérer un certain nombre de tâches sur un site de CV (dictée par une entrée de l'utilisateur). Par exemple, je demande à l'utilisateur de saisir le nombre de tâches qu'il souhaite voir, et d'utiliser un tableau et une boucle alors que j'ai été chargé d'afficher autant de tâches. Cependant, lorsque je clique sur le bouton, il se passe une remarque. Je ne reçois aucune erreur de la console Web. Voici ce que j'ai jusqu'à présent:

<div id="right"> 
      <p> <b> Byrne Dairy</b><br/> 
      QA Lab Technician<br/> 
      September 2015 - March 2016<br/><br/><br/> 

      <button value="Click" onclick="listDuties()">Click</button> to see my top 
       <input type="text" id="byrne_duties" value="0"/> job duties here:<br/><br/><br/> 
      <p id="duties"></p> 
      <script type="text/javascript"> 
      function listDuties() { 
      var byrneduties = [  "Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ", 
            "Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ", 
            "Performing the Gerber Method of testing on samples. ", 
            "Responsible for using the Standard Plate Count method of developing colonies of bacteria. ", 
            "Interpreting results of bacterial and coliform growth patterns in products. " ]; 
      var x = byrneduties[0]; 
      var text = ""; 
      while (byrneduties[x]) { 
      text += byrneduties[x] + "<br>"; 
      x++; 
      document.getElementById('duties').innerHTML = x; 
      } 
      } 
      </script> 


     </div> 

On m'a dit d'essayer de soustraire l'un de l'entrée de l'utilisateur, mais je ne sais pas comment faire. Toute aide est la bienvenue!

Answer 1

Oh, il sont quelques erreurs dans votre code:

• Tout d'abord, votre while la condition n'est pas un booléen (vrai/faux) mais une valeur d'un tableau de chaînes
• La variable x que vous utilisez comme index dans la boucle, est initialisée avec le premier élément de stri tableau ng, puis incrémentée (string + 1 ?!) et finalement retourné dans un objet HTML (p)

Regardez le code suivant revue, où j'ai fait les petits changements ci-dessus:

function listDuties() { 
 
    var byrneduties = ["Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ","Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ","Performing the Gerber Method of testing on samples. ","Responsible for using the Standard Plate Count method of developing colonies of bacteria. ","Interpreting results of bacterial and coliform growth patterns in products. " ]; 
 
    
 
    var n = document.getElementById('byrne_duties').value; 
 
    var x = 0; 
 
    var text = ""; 
 
    while (x < n) { 
 
    text += byrneduties[x] + "<br>"; 
 
    x++; 
 
    } 
 
    document.getElementById('duties').innerHTML = text; 
 
}

<div id="right"> 
 
    <p> <b> Byrne Dairy</b><br/> 
 
    QA Lab Technician<br/> 
 
    September 2015 - March 2016<br/><br/><br/> 
 

 
    <button value="Click" onclick="listDuties()">Click</button> to see my top 
 
     <input type="text" id="byrne_duties" value="0"/> job duties here:<br/><br/><br/> 
 
    <p id="duties"></p> 
 

 
</div>

J'espère que c'était clair, au revoir.

Answer 2

Cependant, lorsque je clique sur le bouton, il se passe une remarque. Je ne suis pas obtenir des erreurs de la console Web du tout.

Votre code actuel va simplement afficher un seul devoir car il est trop écrit encore et encore le même div. Il ne prend même pas en compte les entrées de la zone de texte .

essayer cette

<div id="right"> 
 
    <p> <b> Byrne Dairy</b><br/> QA Lab Technician<br/> September 2015 - March 2016<br/><br/><br/> 
 

 
    <button value="Click" onclick="listDuties()">Click</button> to see my top 
 
    <input type="text" id="byrne_duties" value="0" /> job duties here:<br/><br/><br/> 
 
    <p id="duties"></p> 
 
    <script type="text/javascript"> 
 
     function listDuties() { 
 
     var byrneduties = ["Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ", 
 
      "Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ", 
 
      "Performing the Gerber Method of testing on samples. ", 
 
      "Responsible for using the Standard Plate Count method of developing colonies of bacteria. ", 
 
      "Interpreting results of bacterial and coliform growth patterns in products. " 
 
     ]; 
 
     var numberOfDuties = Number(document.getElementById("byrne_duties").value); 
 
     if (!isNaN(numberOfDuties) && numberOfDuties > 0) 
 
     { 
 
      document.getElementById('duties').innerHTML = byrneduties.slice(0, numberOfDuties).join("<br>"); 
 
     } 
 
     } 
 
    </script> 
 

 

 
</div>

Answer 3

Problème:

var x = byrneduties[0]; // here x is variable which refer to first byrneduties 
var text = ""; 

while (byrneduties[x]) { // here x is index, I think you meant 'i' 
     text += byrneduties[x] + "<br>"; 
     x++; 
     document.getElementById('duties').innerHTML = x; 

Pas besoin de boucle, juste rejoindre tableau

document.getElementById('duties').innerHTML = byrneduties.join('<br/>'); 

Answer 4

Vous pouvez itérer le tableau avec un foreach, comme dans l'exemple suivant:

<div id="right"> 
 
      <p> <b> Byrne Dairy</b><br/> 
 
      QA Lab Technician<br/> 
 
      September 2015 - March 2016<br/><br/><br/> 
 

 
      <button value="Click" onclick="listDuties()">Click</button> to see my top 
 
       <input type="text" id="byrne_duties" value="0"/> job duties here:<br/><br/><br/> 
 
      <p id="duties"></p> 
 
      <script type="text/javascript"> 
 
      function listDuties() { 
 
      var byrneduties = [  "Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ", 
 
            "Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ", 
 
            "Performing the Gerber Method of testing on samples. ", 
 
            "Responsible for using the Standard Plate Count method of developing colonies of bacteria. ", 
 
            "Interpreting results of bacterial and coliform growth patterns in products. " ]; 
 
            
 
      var text = ""; 
 
      
 
      byrneduties.forEach((duty, i)=>{ 
 
       if ((i+1) > document.getElementById('byrne_duties').value) { 
 
       return; 
 
       } 
 
       text += (i+1) + ") " + duty + "<br/>" 
 
      }); 
 
      
 
      
 
      document.getElementById('duties').innerHTML = text; 
 
      } 
 
      </script> 
 

 

 
     </div>

Answer 5

function listDuties() { 
 
      var byrneduties = [  "Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ", 
 
            "Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ", 
 
            "Performing the Gerber Method of testing on samples. ", 
 
            "Responsible for using the Standard Plate Count method of developing colonies of bacteria. ", 
 
            "Interpreting results of bacterial and coliform growth patterns in products. " ]; 
 
      var x = 0; 
 
      var text = ""; 
 
        var input =document.getElementById('byrne_duties').value 
 
      while (x<byrneduties.length && x<input) { 
 
      text += byrneduties[x] + "<br>"; 
 
      x++; 
 
      document.getElementById('duties').innerHTML = text; 
 
      } 
 
      }

<div id="right"> 
 
      <p> <b> Byrne Dairy</b><br/> 
 
      QA Lab Technician<br/> 
 
      September 2015 - March 2016<br/><br/><br/> 
 

 
      <button value="Click" onclick="listDuties()">Click</button> to see my top 
 
       <input type="text" id="byrne_duties" value="0"/> job duties here:<br/><br/><br/> 
 
      <p id="duties"></p> 
 

 

 

 
     </div>

Essayez cette

Answer 6

Voici vos erreurs. `Au lieu de` var x = byrneduties [0];

var x = byrneduties[0]; // x is "Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/>" 
var text = ""; 
while (byrneduties[x]) { // byrneduties["Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/>"] returns undefined 
    text += byrneduties[x] + "<br>"; 
    x++; // string increment probably returns NaN 
    document.getElementById('duties').innerHTML = x; //set inner html to NaN. 
} 

Réécriture en suivant façon

var x = 0; 
var text = ""; 
while (byrneduties[x]) { 
    text += byrneduties[x] + '<br/>'; 
    x++; 
} 
document.getElementById('duties').innerHTML = text ; 

Ou utiliser array.join

var text = byrneduties.join('<br/>'); 
document.getElementById('duties').innerHTML = text;