reenadak

2019-05-13_JavaScript Addition of two numbers bootstrap form

Oct 24th, 2017
121
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.00 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- Required meta tags always come first -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  8.  
  9.     <!-- Bootstrap CSS -->
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
  11.  
  12.     <script type="text/javascript">
  13.       function calculate()
  14.       {
  15.         event.preventDefault();
  16.         var x1 = parseFloat(document.getElementById("x1").value);
  17.         var x2 = parseFloat(document.getElementById("x2").value);
  18.  
  19.         var y = x1 + x2;
  20.  
  21.         document.getElementById("result").innerHTML = y;
  22.       }
  23.     </script>
  24.   </head>
  25.   <body>
  26.   <div style="padding: 50px;"><center><h2 style="padding: 50px;">Javascript Addition example</h2>
  27.    
  28.     <div class="row">
  29.       <div class="col-x-6">
  30.         <form class="form-inline">
  31.           <div class="form-group">
  32.             <label for="x1">First Number : </label>
  33.             <input type="number" class="form-control" id="x1" value="3" placeholder="First number">
  34.           </div>
  35.           <div class="form-group">
  36.             <label for="x2">Second Number : </label>
  37.             <input type="number" class="form-control" id="x2" value="5" placeholder="Second number">
  38.           </div>
  39.           <button class="btn btn-default" onClick="calculate()">Calculate</button>
  40.         </form>
  41.       </div>
  42.     </div>
  43.  
  44.     <div class="resultCover" style="padding: 50px;">
  45.       Result : <span id="result"></span>
  46.     </div>
  47.  
  48.  
  49.     </center></div>
  50.  
  51.     <!-- jQuery first, then Tether, then Bootstrap JS. -->
  52.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  53.     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" ></script>
  54.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  55.   </body>
  56. </html>
Advertisement
Add Comment
Please, Sign In to add comment