How to format output in JavaScript

Question

The script code is for Fibonacci Series. The problem is the output doesn't look good for the eyes. The output is something like this 0,1,1,2,3,5,8,13,21,34,5.... What I want is to format this output and add space after the comma. Is it possible?

<div class="outer">
        <div class="container">
           <button onclick="fibonacci_series(90)">Click To Display Fibonacci Series up to 90</button>
           <p id="demo"> </p>
        </div>
    </div>

    <script>
         var fibonacci_series = function (n) {
            if (n == 1) {
                var loop = [0, 1];
                document.getElementById("demo").innerHTML = loop;
                return loop
            }
            else {
                var s = fibonacci_series(n - 1);
                s.push(s[s.length - 1] + s[s.length - 2]);
                document.getElementById("demo").innerHTML = s;
                return s    
            }
        };
    </script>

what is the purpose of Array#join?

Nina Scholz
– Nina Scholz

2021-04-15 07:00:27 +00:00
Commented Apr 15, 2021 at 7:00 — Nina Scholz
– Nina Scholz, Commented Apr 15, 2021 at 7:00

BAN IP · Accepted Answer · 2021-04-15 07:13:43Z

What you want can be done with the Array.join(str) method, which connects the items in the array to a specific character.

document.getElementById("demo").innerHTML = s.join(", ");

Below is the result of adding the join method to one line of your code.

<div class="outer">
        <div class="container">
           <button onclick="fibonacci_series(90)">Click To Display Fibonacci Series up to 90</button>
           <p id="demo"> </p>
        </div>
    </div>

    <script>
         var fibonacci_series = function (n) {
            if (n == 1) {
                var loop = [0, 1];
                document.getElementById("demo").innerHTML = loop;
                return loop
            }
            else {
                var s = fibonacci_series(n - 1);
                s.push(s[s.length - 1] + s[s.length - 2]);
                document.getElementById("demo").innerHTML = s.join(", ");
                return s    
            }
        };
    </script>

document.getElementById("demo").innerHTML = s.map(n => <li>${n}</li>).join("\n");

Below is an example of modifying the code on the same line, and wrapping the li element around the numbers to make it much easier to see.

<div class="outer">
        <div class="container">
           <button onclick="fibonacci_series(90)">Click To Display Fibonacci Series up to 90</button>
           <p id="demo"> </p>
        </div>
    </div>

    <script>
         var fibonacci_series = function (n) {
            if (n == 1) {
                var loop = [0, 1];
                document.getElementById("demo").innerHTML = loop;
                return loop
            }
            else {
                var s = fibonacci_series(n - 1);
                s.push(s[s.length - 1] + s[s.length - 2]);
                document.getElementById("demo").innerHTML = s.map(n => `<li>${n}</li>`).join("\n");
                return s    
            }
        };
    </script>

I have searched about the .join(' '); I just didnt know where to put it. But wrapping them in a list is a much better choice. Thanks a lot!.

Collectives™ on Stack Overflow

How to format output in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related