Home/ Questions/Q 8193193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T04:24:19+00:00

i want to make function with parameter. i working with below code but it

  • 0

i want to make function with parameter. i working with below code but it is not working. can anyone tell me what am i doing wrong.

<head>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function hide(fn){
            $(fn).click(function(){
                $('div').hide()
            })
        })
    </script>
    <style>
        div { width:500px; height:500px; background:#FF0000; }
    </style>
</head>
<body>
    <button onclick="hide(this)">click for hide</button>
    <a href="#">click</a>
    <button>click</button>
    <div></div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One important thing: you should write unobtrusive JavaScript, as it is considered best practice. With it, you can maintain a separation of content from code. Thus, the first step is to remove that onclick handler on the <button> element.

    I’m assuming you want to click the button that says “click for hide” to hide the <div>. Okay, so let’s get some skeleton code out into the <script>:

    $(document).ready(function() {
    $(<button>).click(function() {
        $(<div>).hide();
    });
});

    But we need to somehow link that click handler to that button, and link that hide function to the actual div. Here’s the easiest way to do this: give your <button> and <div> some ids. Let’s say…

    <button id="hide-button">...</button>
<div id="hide-div">...</div>

    Now, we simply need to make a few modifications to our skeleton code:

    $("#hide-button").click(function() {
    $("#hide-div").hide();
});

    Here’s what this simple code does. When your DOM loads, a nameless function (you can’t name functions that you define on the fly*) is invoked from the document’s ready event. This nameless function attaches the click handler to your #hide-button button, so that when you click the button, another anonymous function is invoked. That function calls hide, which does some jQuery magic that works in all browsers, on that #hide-div div to hide it.

    *Well, you can, but only if you define them first and then pass them. Like this:

    var fn = function() {...};
$(document).ready(fn);

    Edit

    Since the asker does not want to use IDs or classes, here’s an alternative solution:

    <script>
    function hide() {
        $('div').hide();
    }
</script>
...
<button onclick="hide()">click for hide</button>
<div></div>

    Be careful not to place function hide() within jQuery’s document-ready idiom. Doing so will deny you access to hide() because of scoping.

    • 0