Listing Odd Numbers in JavaScript

What are Odd Numbers?

Odd numbers are numbers that are not divisible by 2.

They include:

1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, ...

Thankfully, odd numbers complement even numbers. So our JavaScript code for listing odd numbers is almost same as the one for even numbers.

Create a new file; On Notepad++: File, New.
Call it OddNumbers.html.
Type out the adjoining JavaScript code for listing odd numbers.

Code for Odd Number List with Input in JavaScript

For a little more flexibility, let's add an input form.

We have used a function here.
A function is a chunk of code that is executed when it is called upon, such as when an event occurs.

JavaScript code for OddNumbers.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Listing Odd Numbers</title>
    </head>
    <body>

        <h3>Odd Numbers Between 1 and 99</h3>
        <div id="odd_numbers"></div>

        <script>
            var first = 1;
            var last = 99;
            while (first <= last) {
                if ((first % 2) != 0) {
                    document.getElementById("odd_numbers").innerHTML += first + ", ";
                }
                first = first + 1;
            }
        </script>

    </body>
</html>

Collecting range from user.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Listing Your Own Range of Odd Numbers</title>
    </head>
    <body>
        <h3>Odd Numbers for a Range of your Choice</h3>

        <form name="users_range" action="javascript:diplayNumbers()">
            Enter Start Number: <input type="number" name="start"><br />
            Enter End Number: <input type="number" name="end"><br /><br />
            <button onclick="displayNumbers()">Show My List</button>
        </form>
        <br />
        
        <div id="odd_numbers">Your range appears here.</div>

        <script>
            var result_text = ""; // Put the result here for speed advantage.

            function displayNumbers() {

                /* Obtain an array of the form object that holds the user inputs. */
                var form_for_user_input = document.forms["users_range"];

                /* From the above array, retrieve the users first and last numbers. */
                var first = form_for_user_input["start"].value;
                first = parseInt(first); // convert input to number type

                var last = form_for_user_input["end"].value;
                last = parseInt(last); // convert input to number type

                /* Now we can loop through and display the users choice range. */
                while (first <= last) {
                    if ((first % 2) != 0) {
                        result_text += first + " ";
                    }
                    first += 1; // same as "first = first + 1"
                }

                document.getElementById("odd_numbers").innerHTML = result_text;

            }
        </script>
    </body>
</html>

I have a better version / See other versions.