JavaScript: Calculate multiplication and division of two numbers
JavaScript Basic: Exercise-10 with Solution
Write a JavaScript program to calculate multiplication and division of two numbers (input from the user).
Sample Form:
Pictorial Presentation:
Sample Solution:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JavaScript program to calculate multiplication and division of two numbers </title>
<style type="text/css">
body {margin: 30px;}
</style>
</head>
<body>
<form>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="multiplyBy()" Value="Multiply" />
<input type="button" onClick="divideBy()" Value="Divide" />
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>
</body>
</html>
JavaScript Code:
// Define a function to multiply two numbers and display the result
function multiplyBy() {
// Get the values of the input fields with the ids "firstNumber" and "secondNumber"
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
// Set the inner HTML of the element with the id "result" to the product of the two numbers
document.getElementById("result").innerHTML = num1 * num2;
}
// Define a function to divide two numbers and display the result
function divideBy() {
// Get the values of the input fields with the ids "firstNumber" and "secondNumber"
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
// Set the inner HTML of the element with the id "result" to the quotient of the two numbers
document.getElementById("result").innerHTML = num1 / num2;
}
Live Demo:
See the Pen Javascript: multiplication and division of two numbers - basic - ex-10 by w3resource (@w3resource) on CodePen.
Explanation:
document.getElementById(id).value: The value property sets or returns the value of the value attribute of a text field.
document.getElementById("result").innerHTM : The innerHTML property sets or returns the HTML content (inner HTML) of an element.
ES6 Version:
// Define a function to multiply two numbers and display the result
const multiplyBy = () => {
// Get the value entered in the input field with the id "firstNumber"
const num1 = document.getElementById("firstNumber").value;
// Get the value entered in the input field with the id "secondNumber"
const num2 = document.getElementById("secondNumber").value;
// Set the inner HTML of the element with the id "result" to the product of the two numbers
document.getElementById("result").innerHTML = num1 * num2;
};
// Define a function to divide two numbers and display the result
const divideBy = () => {
// Get the value entered in the input field with the id "firstNumber"
const num1 = document.getElementById("firstNumber").value;
// Get the value entered in the input field with the id "secondNumber"
const num2 = document.getElementById("secondNumber").value;
// Set the inner HTML of the element with the id "result" to the quotient of the two numbers
document.getElementById("result").innerHTML = num1 / num2;
};
Previous: JavaScript program to calculate number of days left until next Christmas.
Next: JavaScript program to convert temperatures to and from celsius, fahrenheit.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics