When we perform sum operation between two elements, it needs to be converted into a number, without converting it merges them because element.val()
returns a string. But when we perform other operations like multiply, subtraction or divide it gives the expected result without performing any typecast.
function add()
{
alert($("#first").val() + $("#second").val());
}
function divide()
{
alert($("#first").val() / $("#second").val());
}
function multi()
{
alert($("#first").val() * $("#second").val());
}
function subst()
{
alert($("#first").val() - $("#second").val());
}
<input type="text" Id="first" />
<input type="text" Id="second" />
<input type="button" Id="add" onclick="add()" value="+"/>
<input type="button" Id="divide" onclick="divide()" value="/"/>
<input type="button" Id="multi" onclick="multi()" value="*" />
<input type="button" Id="subst" onclick="subst()" value="-"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>