CODEWITHSUNDEEP
javascriptjquery
Alex
Alex

Reputation: 3998

How to access a variable passed in through JavaScript function

I have the following button setup:

<div class="BlogManagementDiv">
     <button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add Category</button>                                                    
        <div id="AddcategoryDiv" class="BlogManagementcontainer">
...
        </div>
</div>

Note the onclick does this:

fnToggleBox(AddcategoryDiv)

Where it is passing in a reference to the div below:

AddcategoryDiv

I then access the element in the funciton like this:

    function fnToggleBox(element) 
    {
        if (!$('#'+element.id).is(":visible")) {
            $('#' + element.id).show();
        }
        else {
            $('#' + element.id).hide();
        }
    }

which I can see is completeley ridiculous, as it already has the element, and there is no need to acces it in this way.

My question is, how to properly access this variable using JQuery.

I know how to do using JavaScript, but am trying to do so using JQuery.

I have tried:

function fnToggleBox(element) 
    {
        if (!element).is(":visible")) {
            element.show();
        }
        else {
            element.hide();
        }
    }

and 

function fnToggleBox(element) 
    {
        if (!$element).is(":visible")) {
            $element.show();
        }
        else {
            $element.hide();
        }
    }

but they do not work.

I have googled, but cannot find the answer.

Upvotes: 0

Views: 53

Answers (2)

abc123
abc123

Reputation: 18863

Description
You simply need to wrap the element to access the DOM.

<button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add Category</button>

Solution
I believe you are looking to simply .toggle the visibility. You can do this via the .toggle() function in jQuery.

Like so:

function fnToggleBox(element) 
{
  $(element).toggle();
}

Which isn't really worth writing a function wrapper for, but enjoy!

Documentation

http://api.jquery.com/toggle/

Description: Display or hide the matched elements.
.toggle( [duration ] [, complete ] )

Upvotes: 3

maioman
maioman

Reputation: 18762

jquery wraps dom elements in the $ Jquery function, once these dom elements are wrapped you get all those nice jquery methods but the underlying dom element remains,

you are close , just pass the node to the $ function as argument:

function fnToggleBox(element) {
      console.log(element)
      console.log($(element))
      console.log($('#' + element.id)[0] === element)
      
        if (!$(element).is(":visible")) {
            $(element).show();
        }
        else {
            $(element).hide();
        }
    
    }
#AddcategoryDiv{
  height:10px;
  width:10px;
  background:red
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="BlogManagementDiv">
  <button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add </button>
  <div id="AddcategoryDiv" class="BlogManagementcontainer">

  </div>
</div>

Upvotes: 2

Related Questions