Get value from onclick function and use it outside function

Question

Let's say I have this function in jquery. I'm trying to acces the id of a specified element and then use as I please.

    var values = somejson.json; 

    $('.get-id').on('click', function () {
        var el = $(this);
        console.log(el.data('id'));
        console.log("====");
        var id = el.data('id'); //get this id
    });

    //i would like to use the id here I retrieve here.
    var result = values.find(x => x.id === id);
    console.log(result);

I think it might be pretty simple but i can't wrap my mind around it. Some help would be highly appreciated. Thanks in advance.

You can make a var for it where you have `var values`. However if this is actually your code and not redacted, the result lines will obviously execute because the click handler, and so the id variable will be empty — Dominic, Apr 17 '18 at 15:03
There is no secret to how to do this. Given, your code, just make a variable outside of the click handler and save the id to it. As long as you are using the id value after you clicked, the variable you defined will have the correct value — Huangism, Apr 17 '18 at 15:07
What you are trying to do is practically impossible. Yes, you can create a var outside and update it from inside the click event, but, you would then have to wait until the click event occurs to be able to access the value set in the click handler. You can't eat your delivery pizza before it is delivered. — Kevin B, Apr 17 '18 at 15:41
you are practilly right @kevin. How do you suggest I do this? How can I achieve it? — John, Apr 17 '18 at 15:43
Move code that needs the value into the callback. Any other solution is a variant of that, or won't work. — Kevin B, Apr 17 '18 at 15:43
If I do that in my case a new map will be created every time the click handler is activated. Do you understand? — John, Apr 17 '18 at 15:45
@John Yes, that's what should occur. Why wouldn't it? If you only want the click event handler to be ran once, Why aren't you removing the button? — Kevin B, Apr 17 '18 at 15:45
ok but in this case the page will be filled with different maps. I only want one map but to show different markers every time one specified element is clicked. @KevinB — John, Apr 17 '18 at 15:48
I don't doubt that, I was just looking for some orientation. @KevinB — John, Apr 17 '18 at 15:49

score 0 · Answer 1 · answered Apr 17 '18 at 15:06

0

There's a few ways to do this. One would be what @John said. However, you'll be probably poluting the global namespace depending where and how you're declaring the id variable.

Another good way of doing this, would be wrapping the code that needs the id value in a function. Like so:

var values = somejson.json; 

$('.get-id').on('click', function () {
    var el = $(this);
    console.log(el.data('id'));
    console.log("====");

    useTheId(el.data('id'));
});

function useTheId(id) {
  var result = values.find(x => x.id === id);
  console.log(result);
}

answered Apr 17 '18 at 15:06

António Sérgio Simões

981
7
11

this is the same as assining the id inside the click-handler. I would like to use it outside it. – John Apr 17 '18 at 15:17
please check my edit – John Apr 17 '18 at 15:39

Laura · Accepted Answer · 2018-04-18T13:53:07.060

0

Answer rewritten to take in account the extra code added to the question.

What you need to do is the following:
1. Set up your map and everything else you need for it once
2. Move the marker on every click

So your code should be ordered like this:

// setup of map, marker (with default coordinates), etc.
var marker = ...
var map = ...

$('.get-id').on('click', function () {
    // do everything you need to do to get the lat lng
    var el = ...
    var id = ...
    var lat = ...
    var lng = ...

    // move the existing marker to the new position
    // you will need to figure out how to do it with your library
    // all variables for marker, map, etc. will be accessible here
    // or delete the old marker and create a new one, or whatever else works for you
    marker.move();
});

edited Apr 18 '18 at 13:53

answered Apr 17 '18 at 15:07

Laura

3,233
3
28
45

No, I don't want to move the code that handles the ID to inside the function couse it would break my code. – John Apr 17 '18 at 15:11
@John well, the first way I mentioned is the way to do it - though with the code in the order you posted, I don't think it will lead to the results you want. – Laura Apr 17 '18 at 15:13
Still it's not what I expected. I will edit my code please take a look at it. :) – John Apr 17 '18 at 15:23
@John I've updated my answer to give you a rough overview of how the code should be structured. See if you can figure it out from there :) – Laura Apr 18 '18 at 13:53

Get value from onclick function and use it outside function

2 Answers2