• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / JavaScript continue statement – Skip Iterations in Loop Based on Conditions

JavaScript continue statement – Skip Iterations in Loop Based on Conditions

April 24, 2022 Leave a Comment

We can use the JavaScript continue statement to skip over certain conditions in a for or while loop. The best way to understand the continue statement is with an example.

var count = 0;
for (var i = 0; i < 20; i++) {
  if (i == 5) { continue; }
  //If the above condition is true, then the code below will not be executed
  count = count + i;
}

As you can see in the code above, if the variable i ever is equal to the number 5, then the code count = count + i; will not be executed for that number. But the loop will continue.

If the variable i equals 6, then the code below will be executed for that value.

This can be very useful if you want to iterate through an array and only perform calculations on some items in the array.

Let’s take a look at an example of this below.

Using the JavaScript continue statement to only add the odd numbers in an array

In this example, we will let the user enter in as many numbers as they want, and we will add up only the odd ones.

In the HTML, we will provide code to let the user input as many numbers as they want separated by a comma(,).

Here is the simple HTML set up:

<p>Type as many numbers as you want separated by a comma.</p>
<p>If the numbers are not separated by a comma only, this example will not work.</p>
<input id="userArr" type="text" placeholder="1,2,3">
<div id="click-me" onclick="addOddValues()">Get the sum of all odd numbers</div>
<div id="results"></div>

In the JavaScript code, we will create an array of numbers from this input.

To create an array from the string of numbers the user provides, we will use the split() method along with the Array map() method.

Once we have our array of numbers, we will use a for loop to loop through each value in the array. We can check whether the number is even or if it is less than 0, and use the continue statement if those conditions are true to skip over adding those numbers.

We will finally update the results using the textContent property.

Here is the JavaScript code:

function addOddValues(){
  
  //Get the user input
  var userInput = document.getElementById("userArr").value;

  //Convert user input to an array of numbers
  var numbersArray = userInput.split(',').map(Number);

  //Add all the odd values
  var sum = 0;
  for (var i = 0; i < numbersArray.length; i++) {
    //Check if number is odd or is a negative number
    if ((numbersArray[i] % 2) == 0 || numbersArray[i] < 0){ 
      continue;
    }
    sum = sum + numbersArray[i];
  }

  //Display the sum of the odd numbers
  document.getElementById("results").textContent = "The sum of the odd numbers is: " + sum;

}

The final code and output for this example is below:

Code Output:

Type as many numbers as you want separated by a comma.

If the numbers are not separated by a comma only, this example will not work.

Get the sum of all odd numbers

Full Code:

<p>Type as many numbers as you want separated by a comma.</p>
<p>If the numbers are not separated by a comma only, this example will not work.</p>
<input id="userArr" type="text" placeholder="1,2,3">
<div id="click-me" onclick="addOddValues()">Get the sum of all odd numbers</div>
<div id="results"></div>

<script>

function addOddValues(){
  var userInput = document.getElementById("userArr").value;
  var numbersArray = userInput.split(',').map(Number);
  var sum = 0;
  for (var i = 0; i < numbersArray.length; i++) {
    if ((numbersArray[i] % 2) == 0 || numbersArray[i] < 0){ 
      continue;
    }
    sum = sum + numbersArray[i];
  }
  document.getElementById("results").textContent = "The sum of the odd numbers is: " + sum;
}

</script>

Hopefully this article has helped you to understand how to use the JavaScript continue statement.

Other Articles You'll Also Like:

  • 1.  innerHTML vs outerHTML
  • 2.  Using JavaScript to Sort an Array of Strings
  • 3.  JavaScript offsetTop – Get the Top Position of Element
  • 4.  Remove the First Element From Array in JavaScript
  • 5.  Using JavaScript to Compare Dates
  • 6.  Using JavaScript to Change the Font Size of a Paragraph
  • 7.  JavaScript slice – How to Get a Substring From a String
  • 8.  JavaScript onfocus – Changing Form Styles with the onfocus Event
  • 9.  Using JavaScript to Scroll to the Top of the Page
  • 10.  JavaScript toFixed – How to Convert a Number to a String

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy