Passing a javascript variable to a javascript function?

Question

I have a mapping application that lists different map layers in a menu, with each layer having a particular class name.

This class name is used when the user clicks on the name so that the layer can be either added to or removed from the map, and also the layer be added / removed from a map key.

This is working ok, but I am struggling with including a small cross next to each layer name so the user can remove them from the map key.

My code is below - I try to include an onclick function which takes the layer id and tries to use this in a function but I get an error:

Uncaught Error: Syntax error, unrecognized expression: .icon[object Object]

As my variable is now an object do I need to specify the lid in a different way?

The html is here which shows the list option for a layer that uses the class id:

<li class='last layerlist' id='layer63'><a href='#'><i class="fa fa-circle fa-lg iconlayer63"></i><span> Flood Zone 2</span></a></li>

The Javascript below shows what happens when the user clicks on the list, it takes the id, and then uses this to get the layer name (which is the same as the id) to either hide or show the layer depending on if it is visible:

//Change layer visibility and add / remove from map key
$(".layerlist").click(function() {
    var lid = $(this).attr('id');
    map.getLayers().forEach(function(layer) {
        if (layer.get('name') == lid) {
            var visibility = layer.getVisible();
            if (visibility == false) {
                layer.setVisible(true);
                $(".icon" + lid).removeClass("fa-circle").addClass("fa-check-circle");
                $("#map-content").append("<p id='" + lid + "key'><a href='#'><i class='fa fa-times-circle' onclick='removeLayer(" + lid + ");'></i></a><img src='img/legend/" + lid + ".png' alt='Layer image'/> " + layer.get('label') + "</p>");
            }
            if (visibility == true) {
                layer.setVisible(false);
                $(".icon" + lid).removeClass("fa-check-circle").addClass("fa-circle");
                $("#" + lid + "key").remove();
            }
        }
    });
});

//Remove selected layer from map key
function removeLayer(lid) {
    lid.setVisible(false);
    $(".icon" + lid).removeClass("fa-check-circle").addClass("fa-circle");
    $("#" + lid + "key").remove();
}

Answer 1

The problem is in your onclick attribute:

"... onclick='removeLayer(" + lid + ");' ..."

What the browser will see, if lid is "foo", will be:

... onclick='removeLayer(foo);' ...

Note that that means removeLayer will be called expecting a variable called foo, not the string "foo".

Browsers create globals for all elements that have an id; the global refers to the element object. So foo will refer to the element, not its id.

You wanted quotes:

"... onclick='removeLayer(\"" + lid + "\");' ..."

so the browser sees

... onclick='removeLayer("foo");' ...

Having said that, one part of removeLayer seems to expect an object:

lid.setVisible(false);

You'd have to tell us more about that for us to be able to fully help you.

---

But, rather than fix it by adding quotes, I would stop using onxyz attributes entirely. Instead, use modern event handling.

Remove the onclick attribute, and instead:

$(document.body).on("click", "selector-for-all-lids", function() {
    // We need to know more to help with this line: lid.setVisible(false);
    var lid = this.id;
    $(".icon" + lid).removeClass("fa-check-circle").addClass("fa-circle");
    $("#" + lid + "key").remove();
});

Answer 2

$(".icon" + lid)

If you lid is an object this will be converted to ".icon[Object object]"

So yes you have to change this. Just check what this line return and change your code to get along with it :

 var lid = $(this).attr('id');

Answer 3

If "lid" is an object than you can't write something like this $(".icon" + lid). Instead, you should use something like $(".icon" + lid.paramName)