calculate arithmetic operations of two numbers

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </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"/>
      <input type="button" onclick="sumBy()" value="Sum"/>
      <input type="button" onclick="subtractBy()" value="Subtract"/>
   
    </form>
    
    <p>The result is: <br> 
    <span id="result"></span>
    </p>
  
  </body>

</html>

function multiplyBy(){
  
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 * num2;

}

function divideBy(){
  
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 / num2;

}

function sumBy(){
  
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 + num2;
  
}

function subtractBy(){
  
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 - num2;
  
}

body {margin: 30px;}

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.

All credits to -> http://www.w3resource.com/javascript-exercises/javascript-basic-exercise-10.php