Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement