Calculator Basics

<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator Basics</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>

body{    margin: 40px;font-family: Arial, Helvetica, sans-serif;  }

#total {  display:inline-block;width:100px;text-align:right;      }

</style>
</head>
<body>

            <input id="number1" />
            <input id="number2" />
            <button id="total">Result</button><p>

            <button id="plus">+</button>
            <button id="minus">-</button>
            <button id="multi">*</button>
            <button id="divide">/</button>


<script>


            plus.addEventListener( 'click', function(){
         x = number1.value;
         y = number2.value;
                document.getElementById('total').innerHTML = (+x)+(+y);
            });

        minus.addEventListener( 'click', function(){
         x = number1.value;
         y = number2.value;
                document.getElementById('total').innerHTML = (+x)-(+y);
            });

       multi.addEventListener( 'click', function(){
         x = number1.value;
         y = number2.value;
                document.getElementById('total').innerHTML = x * y;
            });

        divide.addEventListener( 'click', function(){
         x = number1.value;
         y = number2.value;
          res=x / y;
         document.getElementById('total').innerHTML = res.toFixed(3);
            });


</script>
</body>
</html>