Javascript Array and While Loops

Question

I am very new to javascript and I am trying to list a certain number of job duties on a resume site (dictated by a user input). For example, I ask the user to input the number of job duties they want to see, and using an array and while loop I've been tasked with displaying that many job duties. However, when I click the button, noting is happening. I am not getting any web console errors at all. Here is what I have so far:

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

I was told to try and subtract one from the user input, but I'm not sure how to do that. Any help would be great!

Shouldn't it be var x = 0; instead of var x = byrneduties[0]; and document.getElementById('duties').innerHTML = text ? — Titus
– Titus, Commented Apr 21, 2017 at 13:28
You need to learn how to debug. Simply stepping through your code you would realize that x is going to be "Gathering product samples blah blah boring", which you then try to use to index into the array byrneduties[x]. Array indexes are numbers, not text. Since javascript don't GAF, it just returns undefined. What you're doing right now--STOP. Go read this developers.google.com/web/tools/chrome-devtools/javascript — user1228
– user1228, Commented Apr 21, 2017 at 13:28
Titus, when I do that, no matter what the user input for number of job duties they want to see, it prints all 5. Any thoughts? — Jordan Jackson
– Jordan Jackson, Commented Apr 21, 2017 at 13:31
You will first have to get the user's input var userChoice = parseInt(document.getElementById("byrne_duties").value) and then change the loop's condition to while(x < userChoice). — Titus
– Titus, Commented Apr 21, 2017 at 13:35

Alessandro · Accepted Answer · 2017-04-21 13:36:00Z

2

Oh, there're some errors in your code:

First of all, your while condition is not a boolean (true/false) but a value of a string array
The var x that you use as index in the loop, is initialized with the first element of string array, then incremented (string+1?!) and finally returned back into an html object (p)

Look the following reviewed code, where I made the above little changes:

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>

I hope it was clear, bye.

answered Apr 21, 2017 at 13:36

Alessandro

4,4729 gold badges43 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jordan Jackson Over a year ago

Thank you very much. I really appreciate the explanation as well.

Alessandro Over a year ago

I'm glad it helped you, bye.

gurvinder372 · Accepted Answer · 2017-04-21 13:29:39Z

However, when I click the button, noting is happening. I am not getting any web console errors at all.

Your current code is simply going to display only one duty since it is over-writing the same div again and again. It is not even taking input from the textbox into consideration.

try this

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

@JordanJackson If statement is to check if the user has entered a positive number in the textbox.

Ovais · Accepted Answer · 2017-04-21 13:31:38Z

0

Problem:

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;

No need to loop, just join array

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

answered Apr 21, 2017 at 13:31

Ovais

3842 silver badges7 bronze badges

Comments

lpg · Accepted Answer · 2017-04-21 13:34:23Z

You could iterate the array with a foreach, like in the following example:

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

Mostafa El-Messiry · Accepted Answer · 2017-04-21 13:37:22Z

 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>

Try this

Michael Kapustey · Accepted Answer · 2017-04-21 13:41:06Z

Here is your mistakes.

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

Rewrite it in next way

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

Or use array.join

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

Collectives™ on Stack Overflow

Javascript Array and While Loops

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related