function add(){
"use strict";
var num1 = parseInt(document.getElementById("firstNumber").value);
//You need to define your variable before use.
var num2 = parseInt(document.getElementById("secondNumber").value);
console.log(document.getElementById("firstNumber"));
//this is a DOM object
console.log(typeof document.getElementById("firstNumber").value);
//this is a "string"
console.log(typeof parseInt(document.getElementById("firstNumber").value));
console.log(typeof +document.getElementById("firstNumber").value);
//quickly by use '+'
document.getElementById("result").innerHTML =num1+num2;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="MyStyle.css" rel="stylesheet" type="text/css">
<script src="myEvents.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="add()" Value="add" />
</form>
<p>Total:
<div id="result">
<input type="text"/> </div>
Run code snippetHide results