What is Multiplication Operator (*) in JavaScript?

In this tutorial, we will learn about the multiplication operator (*) in JavaScript. The multiplication operator is a binary operator which requires at least two operands to operate on. The multiplication operator simply multiplies the left operand with the right operand, or you can say that it simply increases the value of the left operand with the same value till the value of the right operand becomes zero. The example below will explain you everything −

3 * 2 = 6 OR 3 + 3 = 6
5 * 3 = 15 OR 5 + 5 + 5 = 15

In the above example, we have seen the working of the multiplication operator which simply increases the value of left operands 3 and 5 with the same value 2 and 3 times respectively.

Syntax

The following syntax will show you how you can use the multiplication operator in JavaScript −

var product = val1 * val2;

Let us understand the working of the multiplication operator by practically implementing it inside the code example −

Algorithm

Step 1 − In the first step, we will define two different input tags with number type in the HTML document to get numbers input from the user.

Step 2 − In this step, we will add a button tag with an onclick event to show the result of the multiplication operator once the user clicks the button.

Step 3 − In the next step, we will define a JavaScript function and assign it as a value to the onclick event which calls this function on user click.

Step 4 − In the last step, we will grab the inputs entered by the user and apply the multiplication operator on them as shown in the above syntax, after that we will write the logic to show the result on the user screen.

Example 1

The below example will illustrate the use of the multiplication operator with two inputs of similar types −

<!DOCTYPE html>
<html>
<body>
   <h2> Using Multiplication operator (*) in JavaScript</h2>
   <h4> Enter two numbers: </h4>
   <input type="number" id="inp1"> <br> <br>
   <input type="number" id="inp2"> <br> <br>
   <p> Click to see the result of Multiplication operator (*) of above inputs. </p>
   <p id="result"> </p>
   <button onclick="display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var val1 = Number(inp1.value);
         var val2 = Number(inp2.value);
         var pro = val1 * val2;
         result.innerHTML += " The result of the product or the multiplication operator (*) of expression <b> " + val1 + " * " + val2 + " </b> is: <b> " + pro + " </b> <br> ";
      }
   </script>
</body>
</html>

In this example, we have taken two numbers as input from the user and then apply the multiplication operator to them to see how this operator works.

Let us see the working and the behavior of the multiplication operator when the inputs are of different data types entered by the user.

Algorithm

The algorithm above and this example is almost same. You just need to replace the type of any one input tag from number to text and you are good to go by keeping the rest of the code as it is.

Example 2

The below example will explain the behavior of the multiplication operator in the scenario where the inputs entered by the user are of different data types −

<!DOCTYPE html>
<html>
<body>
   <h2> Multiplication operator (*) in JavaScript </h2>
   <h4> Enter two numbers: </h4>
   <input type="number" id="inp1"> <br> <br>
   <input type="text" id="inp2"> <br> <br>
   <p> Click to see the result of Multiplication operator (*) of above inputs. </p>
   <p id="result"> </p>
   <button onclick="display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var val1 = Number(inp1.value);
         var val2 = inp2.value;
         var pro = val1 * val2;
         result.innerHTML += " The result of the product or the multiplication operator (*) of expression <b> " + val1 + " * " + val2 + " </b> is: <b> " + pro + " </b> <br> ";
      }
   </script>
</body>
</html>

In the above example, we are taking the inputs from the user in form of two different data types i.e. string and number, if both the inputs are integer then the multiplication operator works as it always does, but if one input is a number while another is a string then it will show NaN ( Not a Number ) as output.

Let us see one more code example where we are dealing with multiple inputs and apply a multiplication operator to them to see the behavior of this operator in such a scenario.

Algorithm

The algorithm of this example is similar to the above example you just need to add one more input tag in the document to get multiple input from the user and then grab it inside the JavaScript code to apply the multiplication operator on all of them.

Example 3

The below example will show the behavior of the multiplication operator with multiple operands or more than two operans −

<!DOCTYPE html>
<html>
<body>
   <h2>Multiplication operator (*) in JavaScript </h2>
   <h4> Enter three numbers: </h4>
   <input type="number" id="inp1"> <br>
   <input type="number" id="inp2"> <br>
   <input type="number" id="inp3"> <br>
   <p> Click to see the result of Multiplication operator (*) of above inputs. </p>
   <p id="result"> </p>
   <button onclick="display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var inp3 = document.getElementById("inp3");
         var val1 = Number(inp1.value);
         var val2 = Number(inp2.value);
         var val3 = Number(inp3.value)
         var pro = val1 * val2 * val3;
         result.innerHTML += " The result of the product or the multiplication operator (*) of expression <b> " + val1 + " * " + val2 + " * " + val3 + " </b> is: <b> " + pro + " </b> <br> ";
      }
   </script>
</body>
</html>

In this example, we have taken three inputs from the user of the type number and applied the multiplication operator to them and see the behavior of this operator in this scenario.

We have seen three different examples of implementing the multiplication operator practically in three different scenarios. In the first example, we have seen the simple implementation of the operator, and then in the latter two examples, we have seen the behavior in two different scenarios one in case of different type inputs and another in multiple inputs of the same type.

Updated on: 08-Nov-2022

321 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements