Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <!-- Required meta tags always come first -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <!-- Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
- <script type="text/javascript">
- function calculate()
- {
- event.preventDefault();
- var x1 = parseFloat(document.getElementById("x1").value);
- var x2 = parseFloat(document.getElementById("x2").value);
- var y = x1 + x2;
- document.getElementById("result").innerHTML = y;
- }
- </script>
- </head>
- <body>
- <div style="padding: 50px;"><center><h2 style="padding: 50px;">Javascript Addition example</h2>
- <div class="row">
- <div class="col-x-6">
- <form class="form-inline">
- <div class="form-group">
- <label for="x1">First Number : </label>
- <input type="number" class="form-control" id="x1" value="3" placeholder="First number">
- </div>
- <div class="form-group">
- <label for="x2">Second Number : </label>
- <input type="number" class="form-control" id="x2" value="5" placeholder="Second number">
- </div>
- <button class="btn btn-default" onClick="calculate()">Calculate</button>
- </form>
- </div>
- </div>
- <div class="resultCover" style="padding: 50px;">
- Result : <span id="result"></span>
- </div>
- </center></div>
- <!-- jQuery first, then Tether, then Bootstrap JS. -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" ></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment