CODEWITHSUNDEEP
javascriptloops
john d
john d

Reputation: 21

How can I prevent my while loop from printing out just one result?

I'm using JavaScript while loop to print out Fibonacci Series numbers that are under 40. When I do a cosole.log() I get the numbers I need, but for some reason when trying to bind results to a div it's just printing out the last number (34). Is there an easy to way fix this? Thank you

let choice = document.getElementById('sequence').value;
let num1 = 0,
  num2 = 1,
  next;
let fibonacciSequenceText;

if (choice == "fibonacci") {

  while (num1 < 40) {
    fibonacciSequenceText = num1 + ", ";
    next = num1 + num2;
    num1 = num2;
    num2 = next;
    console.log(fibonacciSequenceText);

  }

  document.getElementById('results').innerHTML = fibonacciSequenceText;

}
<select id="sequence" class="drop-down-menu">
  <option value="select;">Select--</option>
  <option value="fibonacci">Fibonacci Sequence</option>
  <option value="even">Even Numbers</option>
  <option value="odd">Odd Numbers</option>
</select>

Upvotes: 0

Views: 250

Answers (3)

user2560539
user2560539

Reputation:

Use an array instead and join(). For example:

let choice = document.getElementById('sequence');
let num1 = 0,
  num2 = 1,
  next;
let fibonacciSequenceText = [];

choice.addEventListener('change',(e) => {
if (e.target.value == "fibonacci") {

  while (num1 < 40) {
    fibonacciSequenceText.push(num1);
    next = num1 + num2;
    num1 = num2;
    num2 = next;
    console.log(fibonacciSequenceText);

  }

  document.getElementById('results').innerHTML = fibonacciSequenceText.join(',');

}
});
<select id="sequence" class="drop-down-menu">
  <option value="select;">Select--</option>
  <option value="fibonacci">Fibonacci Sequence</option>
  <option value="even">Even Numbers</option>
  <option value="odd">Odd Numbers</option>
</select>
<div id="results"></div>

Upvotes: 0

RonCG
RonCG

Reputation: 369

You are overwriting your variable on each iteration. Declare your variable like this:

let fibonacciSequenceText = "";

And try this inside your while loop:

fibonacciSequenceText += num1 + ", ";

This way, you will add the corresponding number in each iteration to your variable, and not overwrite it.

Upvotes: 1

Aalexander
Aalexander

Reputation: 5004

You should use String concatenation to build a string instead of reassining your variable in each iteration.

fibonacciSequenceText += num1 + ", ";

Also note to initialise your fibonacciSequenceText with an empty string, otherwise in your result the first entry will be undefined

let fibonacciSequenceText = "";


document.getElementById('sequence').addEventListener('change',function(){
let choice = document.getElementById('sequence').value;
let num1 = 0,
  num2 = 1,
  next;
let fibonacciSequenceText = "";

if (choice == "fibonacci") {
  while (num1 < 40) {
    fibonacciSequenceText += num1 + ", ";
    next = num1 + num2;
    num1 = num2;
    num2 = next;


  }

  document.getElementById('results').innerHTML = fibonacciSequenceText;

}
})
<select id="sequence" class="drop-down-menu">
  <option value="select;">Select--</option>
  <option value="fibonacci">Fibonacci Sequence</option>
  <option value="even">Even Numbers</option>
  <option value="odd">Odd Numbers</option>
</select>

<div id="results"></div>

Upvotes: 0

Related Questions