Listing Odd Numbers Using JavaScript
This tutorial explains how to list odd numbers using JavaScript in a simple and beginner-friendly way. It is designed for students and learners who are new to programming and want to understand how odd numbers can be generated using basic JavaScript logic.
By the end of this lesson, you will know how to generate odd numbers in JavaScript, use loops effectively, and apply simple conditions to filter numbers.
What Are Odd Numbers? | Maths Explanation for JavaScript Kids
Odd numbers are whole numbers that are not divisible by 2. Examples include 1, 3, 5, 7, and 9. In mathematics, an odd number always leaves a remainder of 1 when divided by 2.
Understanding odd numbers is an important part of primary mathematics, and JavaScript provides a practical way to explore this concept using code.
How to Generate Odd Numbers in JavaScript
To generate odd numbers in JavaScript, we use a loop to go through a range of numbers and a condition to check whether each number is odd.
A number is considered odd if:
number % 2 !== 0
This condition checks whether the remainder after dividing by 2 is not zero.
JavaScript Odd Number Program (Beginner Example)
The following example shows a simple JavaScript odd number program. It lists odd numbers within a given range and displays them on the page.
This type of example is commonly used in JavaScript beginner tutorials and helps students learn both maths concepts and programming basics at the same time.
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 User Input in JavaScript
For a little more flexibility, let's add an input form.
Using a Loop to Display Odd Numbers in JavaScript
A loop allows JavaScript to repeat an action multiple times. In this case, the loop checks each number in a range and displays only the odd ones.
This approach demonstrates:
- How to use a loop in JavaScript
- How to apply conditions
- How to list odd numbers with JavaScript clearly and efficiently
It is an excellent example for learners studying JavaScript maths code for the first time.
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.
Why Learn Odd Numbers with JavaScript?
Learning how to work with odd numbers in JavaScript helps students to:
- Understand number patterns
- Practice logical thinking
- Learn basic programming structures
- Combine primary maths with coding skills
This makes JavaScript a useful tool for teaching and reinforcing mathematical concepts in an interactive way.
Who Is This JavaScript Lesson For?
This JavaScript lesson is suitable for:
- Primary school students
- Beginners learning JavaScript
- Teachers looking for simple coding examples
- Anyone learning how to generate odd numbers in JavaScript
No prior JavaScript programming experience is required.
Key Takeaways from Listing Odd Numbers Using JavaScript
- Odd numbers are numbers not divisible by 2
- JavaScript can be used to generate and display odd numbers
- Loops and conditions are essential programming tools
- This tutorial provides a clear JavaScript odd numbers tutorial for beginners
Summary: Listing Odd Numbers Using JavaScript
Learning how to generate odd numbers in JavaScript is a fun and practical way to combine math and coding. Whether you're a teacher, parent, or student, these JavaScript tutorials for kids make programming approachable and engaging.
So! JavaScript Fun Practice Exercise - List Odd Numbers
As a fun practice exercise, feel free to try out your own boundary values, and see how the JavaScript code lists the odd numbers between those boundary values.
JavaScript Code for Odd Numbers
<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>
JavaScript Code for Odd Numbers - Collecting range from user.
<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 />
<!-- Users result will be shown here. -->
<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>