Using JavaScript to Increment a Variable by 1

In JavaScript, we can increment a variable by 1 easily by using the increment operator (++).

someVaraible++;

The above code would be the equivalent of:

someVaraible = someVaraible + 1;

Let’s see a simple example of this below.

In the example below, we will have an array of numbers that we will want to get the total value of. We will do this by using a JavaScript function that will use a for loop and the += assignment operator to add all the numbers in the array.

To iterate through all of the numbers in the array, we will need to make use of the increment operator to increment our variable i by 1 each time until it reaches the length of the array.

var numbersArray = [4,3,5,8];

function addArray(theArray){
  var arrayTotal = 0;
  for (var i = 0; i < theArray.length; i++) {
    arrayTotal += theArray[i];
  }
  return arrayTotal;
}

var addUpArray = addArray(numbersArray);

The variable addUpArray above would have value 20, which is what you get if you add up all the numbers in the array numbersArray.

Interactive Example of Using JavaScript to Increment a Variable by 1

Below 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="addArray()">Add Numbers</div>
<div id="results"></div>

We will get the numbers the user has inputted by using the value property.

We will then create an array of numbers from this input and add up all the numbers with the help of the JavaScript increment operator ++, just like we did in the function we created above.

To create an array from the string of numbers the user provides, we will use the split() method along with the Array map() method. We will add this code to our addArray function.

We will update the results below using the textContent property..

function addArray(){
  
  //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 of the numbers together
  var arrayTotal = 0;
  for (var i = 0; i < theArray.length; i++) {
    arrayTotal += theArray[i];
  }

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

}

The final code and output for this example is below:

Code Output:

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="addArray()">Add Numbers</div>
<div id="results"></div>

<script>

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

</script>

Hopefully this article has helped you to understand how to use JavaScript to increment a variable by 1.