JavaScript using variables outside of function events

Question

I am pretty new to java-script. So sorry if this is a stupid question.

I have the JavaScript function for some accordion elements, The function it is work without any problem. But I want when I click on any accordion element get the id attribute of that accordion (As you see in click function event), then put this id before the contentTypeValue selector in the second function.

The showHideUniMul function doesn't work, I think this is due to the itemId variable. How can use the itemId outside the click event function until work with showHideUniMul function?

Info the showHideUniMul function work without any problem when I don't use itemId variable and the itemId return to the id attribute successfully.

$('ul#menu-to-edit li a.item-edit').click(function() {
    var itemId = $(this).parent().parent().parent().parent().attr('id');
});

var showHideUniMul = function() {
    var contentTypeValue = $(itemId + ' .field-content-type input:checked').val();
    if (contentTypeValue === 'uniform') {
       //some codes here
    } else if (contentTypeValue === 'multiple') {
       //some codes here
    } else {
       //some codes here
    }
};

showHideUniMul();
contentType.on('change', showHideUniMul);

EDIT

This is my Html structure

    <ul id="menu-to-edit">
    <li id="1">
        <div>
            <div>
                <span>
                    <a class="item-edit">Click Me and then check radio boxes</a>
                </span>
            </div>
        </div>
        <div>
            <p class="field-content-type">
                <input type="radio" name="uniform[1]" value="uniform" />
                <input type="radio" name="multiple[1]" value="multiple" />
            </p>
        </div>
    </li>
    <li id="2">
        <div>
            <div>
                <span>
                    <a class="item-edit">Click Me and then check radio boxes</a>
                </span>
            </div>
        </div>
        <div>
            <p class="field-content-type">
                <input type="radio" name="uniform[2]" value="uniform" />
                <input type="radio" name="multiple[2]" value="multiple" />
            </p>
        </div>
    </li>
</ul>

well you can not use a variable when it is defined in a different scope. So in order to do it, you need to define the variable in a scope where both can see it. — epascarello, Aug 03 '17 at 18:37
Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Heretic Monkey, Aug 03 '17 at 18:39
How is the click event related to that function? Did you mean to call that function in the click event? — David, Aug 03 '17 at 18:40
@David I want to call the `showHideUniMul` according to the `id` attribute — SAFEEN 1990, Aug 03 '17 at 18:42
@ScottMarcus I say the functions work without any problem but I want the way or method of using `itemId` with the `showHideUniMul` function — SAFEEN 1990, Aug 03 '17 at 18:44
@SAFEEN1990: But *when* do you want to call the function? The id only exists in the context of the click event, and you're not calling the function from the click event. — David, Aug 03 '17 at 18:45
@David in the click event function only I want to get the id attribute then using this id as a selector with the `contentTypeValue` variable. — SAFEEN 1990, Aug 03 '17 at 18:49
The first time the showHideUniMul runs, the itemId will not exist as nothing would have invoked that click method yet. And nothing in that showHideUniMul is checking to see if the itemId is set or not. This is regardless of if you fix your scoping issue with the itemId being scoped down to the click method. EDIT: and the use of repeated `parent()` calls is overly tightly coupled the logic to the markup. A more lose coupling would involve the use of `closest(parentSelector)` — Taplar, Aug 03 '17 at 18:52
I understand, but the best way to post questions is such that we can actually run the code you are posting and then provide a working version. Questions should always be complete. — Scott Marcus, Aug 03 '17 at 18:54
@Taplar as I say I'm new in javascript I added some changes to my WordPress menu items I need this jquery trick please help me and correct my code or add the fresh working code for me — SAFEEN 1990, Aug 03 '17 at 18:59
Quite a few people here and in the answers have addressed the scope issue, yet you seem to be ignoring their feedback. Then in your change handler you just need to make sure it isn't null or undefined. — Taplar, Aug 03 '17 at 19:00
@SAFEEN1990 check the answer below and if useful then only mark the answer as accepted.Thanks — Alive to die - Anant, Aug 03 '17 at 19:22
@AlivetoDie Thanks for reply my question now I edit the question and I add my HTML structure if you can I want you to add change event to my radio check boxes instead of the click event over the normal button — SAFEEN 1990, Aug 03 '17 at 19:27
@SAFEEN1990 `var contentTypeValue = $(itemId + ' .field-content-type input:checked').val();` this code will be something like `1+"uniform"` which have no useful meanings — Alive to die - Anant, Aug 03 '17 at 19:30
@AlivetoDie you right, I want `contentTypeValue ` like this contentTypeValue = The checked radio button in menu item that has the id 1 or 2 to according to click event — SAFEEN 1990, Aug 03 '17 at 19:35
@AlivetoDie the radio buttons have the name attributes if you need the name instead of id you can use the name attributes — SAFEEN 1990, Aug 03 '17 at 19:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150996/discussion-between-safeen-1990-and-alive-to-die). — SAFEEN 1990, Aug 03 '17 at 19:45

Alive to die - Anant · Accepted Answer · 2017-08-03T19:51:26.910

Note:- variable created inside a function vanishes after function execution completed(due to local scope), so you can't use them into other function directly.

You need to use global-variable scope/concept here:-

var itemId; // define global

$('ul#menu-to-edit li a.item-edit').click(function() {
    itemId = $(this).parent().parent().parent().parent().attr('id');
});

var showHideUniMul = function() {
    var contentTypeValue = $(itemId + ' .field-content-type input:checked').val();
    if (contentTypeValue === 'uniform') {
       //some codes here
    } else if (contentTypeValue === 'multiple') {
       //some codes here
    } else {
       //some codes here
    }
};

showHideUniMul();
contentType.on('change', showHideUniMul);

A sample example:-

var itemId; // define global

$('ul#menu-to-edit li a.item-edit').click(function() {
  itemId = $(this).parent().parent().parent().parent().attr('id');
});

var showHideUniMul = function() {
  var contentTypeValue = $('.field-content-type input:checked').val();
  console.log(itemId);
 
};
$('input[type=radio]').on('change',function(){
  showHideUniMul();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-to-edit">
  <li id="1">
    <div>
      <div>
      <span>
        <a class="item-edit">Click Me and then check radio boxes</a>
      </span>
      </div>
    </div>
    <div>
      <p class="field-content-type">
        <input type="radio" name="uniform[1]" value="uniform" />
        <input type="radio" name="multiple[1]" value="multiple" />
      </p>
    </div>
  </li>
  <li id="2">
    <div>
      <div>
        <span>
          <a class="item-edit">Click Me and then check radio boxes</a>
        </span>
      </div>
    </div>
    <div>
      <p class="field-content-type">
        <input type="radio" name="uniform[2]" value="uniform" />
        <input type="radio" name="multiple[2]" value="multiple" />
      </p>
    </div>
  </li>
</ul>

I was looking at this and thinking, aside from the scope issue. It kind of would make sense to store the element rather than the id. Then you wouldn't need that extra lookup. You could just find() off of it. — Taplar, Aug 03 '17 at 18:59
@Taplar yes that will be a better option but it definitely depend upon what structure and what depth-level of code used there. — Alive to die - Anant, Aug 03 '17 at 19:02

score 1 · Answer 2 · edited Aug 03 '17 at 19:53

Your problem is because of your scoping - itemId is not defined in the showHideUniMul() function. Change your code to the following -

var itemId;

$('ul#menu-to-edit li a.item-edit').click(function() {
    itemId = $(this).parent().parent().parent().parent().attr('id');
});

var showHideUniMul = function() {
    var contentTypeValue = $('#' + itemId + ' .field-content-type input:checked').val();
    if (contentTypeValue === 'uniform') {
       //some codes here
    } else if (contentTypeValue === 'multiple') {
       //some codes here
    } else {
       //some codes here
    }
};

showHideUniMul();
contentType.on('change', showHideUniMul);

This makes itemId global and available for access from any function. You will also need to add '#' + itemId to the value of contentTypeValue

why is this getting downvoted - this is the right answer assuming you get itemId properly on click — Upamanyu Sundaram, Aug 03 '17 at 18:38

JavaScript using variables outside of function events

2 Answers2