• 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 / Examples Using the JavaScript += Addition Assignment Operator

Examples Using the JavaScript += Addition Assignment Operator

February 23, 2022 Leave a Comment

The JavaScript += addition assignment operator will take the value on the right side of the operator and add it to the value of the variable on the left side of the addition operator.

someVaraible += 3;

The above code would be the equivalent of:

someVaraible = someVaraible + 3;

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. Here is the JavaScript code below:

var numbersArray = [4,3,5,8,14,67,56,23];

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 180, which is what you get if you add up all the numbers in the array numbersArray.

Interactive Example of the JavaScript += Addition Assignment Operator

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 then create an array of numbers from this input and add up all the numbers with the help of the JavaScript += 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:

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.

Add 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="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 the JavaScript += addition assignment operator

Other Articles You'll Also Like:

  • 1.  Insert Character Into String In JavaScript
  • 2.  JavaScript Map Size – Find Length of JavaScript Map
  • 3.  Using JavaScript to Count Even Numbers in an Array
  • 4.  Using JavaScript to Return Two Values
  • 5.  Using JavaScript to Check If String is a Number
  • 6.  Using JavaScript to Get Date Format in dd mm yyyy
  • 7.  How to Clear an Input Field in JavaScript
  • 8.  JavaScript Change Background Color of Element
  • 9.  JavaScript Coin Flip – How to Simulate Flipping a Coin in JavaScript
  • 10.  How to Convert Degrees to Radians Using JavaScript

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