FastFoodCoding

Login


Connect with one of the following accounts





Login

Please wait while we redirect...

Views: 2338   



Demo

Code

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>

    <script>
        $(document).ready(function() {
            $("#result").toggleClass("result");

            //Addition
            $("#add").click(function() {
                var a = $("#cal1").val();
                var b = $("#cal2").val();
                $("#result").html(+a + +b);

            });

            //Subtraction
            $("#sub").click(function() {
                var a = $("#cal1").val();
                var b = $("#cal2").val();
                $("#result").html(+a - +b);
            });

            //Multiplication
            $("#mul").click(function() {
                var a = $("#cal1").val();
                var b = $("#cal2").val();
                $("#result").html(+a * +b);
            });

            //Division
            $("#div").click(function() {
                var a = $("#cal1").val();
                var b = $("#cal2").val();
                $("#result").html(+a / +b);

            });

        });
    </script>
    <style>
        .result {
            font-size: xx-large;
            color: blue;
        }
    </style>
</head>

<body>


    <div>
        Enter Number :
        <input type="text" id="cal1"><br><br> Enter Number :
        <input type="text" id="cal2"><br><br>


        <button type="button" id="add"> Add </button>
        <button type="button" id="sub"> Sub </button>
        <button type="button" id="mul"> Mul </button>
        <button type="button" id="div"> Div</button><br><br><br> Result is:
        <p id="result"></p>

    </div>
</body>

</html>



On By


Top Tutorials

Top Questions

Top Articles

Top Blogs

Top News