title: Passing a javascript variable to a javascript function?
body: <p>I have a mapping application that lists different map layers in a menu, with each layer having a particular class name.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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: </p>
  
  <blockquote>
    <p>Uncaught Error: Syntax error, unrecognized expression: .icon[object
    Object]</p>
  </blockquote>
  
  <p>As my variable is now an object do I need to specify the <code>lid</code> in a different way?</p>
  
  <p>The html is here which shows the list option for a layer that uses the class id:</p>
  
  <pre><code>&lt;li class='last layerlist' id='layer63'&gt;&lt;a href='#'&gt;&lt;i class="fa fa-circle fa-lg iconlayer63"&gt;&lt;/i&gt;&lt;span&gt; Flood Zone 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>//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("&lt;p id='" + lid + "key'&gt;&lt;a href='#'&gt;&lt;i class='fa fa-times-circle' onclick='removeLayer(" + lid + ");'&gt;&lt;/i&gt;&lt;/a&gt;&lt;img src='img/legend/" + lid + ".png' alt='Layer image'/&gt; " + layer.get('label') + "&lt;/p&gt;");
              }
              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();
  }
  </code></pre>