JavaScript

How to pass JavaScript object to a function inside the script block?

How to pass JavaScript object to a function inside the script block?, someone asked me to explain?
By:

In this article we will discuss about how to pass JavaScript object to a function inside the script block. If we pass an object as a parameter and we will get the properties of function inside the called function. Below example I will show you about it.

Example:

<html>
<head>
     <title>Pass JavaScriptobject to a function inside the script block</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnSubmit]").click(function () {
                var dataobject = {};
               dataobject.input1 = $("#txtFirstInput").val();
               dataobject.input2 = $("#txtSecondInput").val();
                $("#txtResult").val(addition(dataobject));
                return false;
            });
        });
        function addition(data) {
            var out = parseInt(data.input1) + parseInt(data.input2);
            return out;
        }
    </script>
    <style type="text/css">
        .btn {
            font-size: 19px;
            width: 100px;
            height: 45px;
            background: #00BCD4;
            border-style: solid;
            border-color: white;
            color: white;
        }
         .mytextstyle {
           font-size: 19px;
            height: 45px;
            width: 300px;
        }
   </style>
</head>
<body>
   <h2 style="color: #FF5722;">Pass JavaScript object to afunction inside the script block</h2>
    <table style="border: 1px solid #DED8D8; font-size: 1px; width: 500px; padding: 10px; font-family: Arial;">
        <tr>
            <td>Name:
            </td>
            <td>
                <input type="text" id="txtFirstInput" class="mytextstyle" value="15" />
            </td>
        </tr>
        <tr>
            <td>Age:
            </td>
            <td>
                <input type="text" id="txtSecondInput" class="mytextstyle" value="27" />
            </td>
        </tr>
        <tr>
            <td>&nbsp;
            </td>
            <td style="padding-left: 50px">
                <input type="submit" id="btnSubmit" class="btn" value="Submit" />
            </td>
        </tr>
        <tr>
            <td>Result:
            </td>
            <td>
                <input type="text" id="txtResult" class="mytextstyle" placeholder="Result" />
            </td>
        </tr>
    </table>
</body>
</html> 

Output:

pass JavaScript object to a function inside the script block

Related Article

Post your comments / questions



Recent Article