title: Replacing background image and element text
body: <p>I am building a script to inject a custom text and image to an HTML page with a rather complicated structure:</p>
  
  <pre><code>&lt;ul class="list"&gt;
      &lt;li class="result"&gt;
        &lt;div class="div_result"&gt;
          &lt;div class="display"&gt;
            &lt;div class="record-icon pubtype"&gt;
              &lt;span class="pubtype-icon"&gt;&lt;/span&gt;
              &lt;p class="text"&gt;icon text&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="links"&gt;
              &lt;span class="custom-link"&gt;&lt;a class="icon-image-link" href="image.jpg" onclick="string"&gt;String&lt;a/&gt;&lt;/span&gt;
              &lt;span class="custom-link"&gt;&lt;a class="icon-image-link" href="image.jpg" onclick="string"&gt;String&lt;a/&gt;&lt;/span&gt;
              &lt;span class="custom-link"&gt;&lt;a class="icon-image-link" href="image.jpg" onclick="string"&gt;String&lt;a/&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>I have written a JavaScript that is meant to search for a specific substring in the a elements, and if that exists, to change the background image of the .icon span and the text of the .text p element, based on input from the user:</p>
  
  <pre><code>try {
    var backgroundcontainer= setInterval("addMyScript()", 100);
  
    function addMyScript() {
      if (!window.jQuery){return;}
      clearInterval(backgroundcontainer); //clean interval
  
      jQuery(function() {
        var pubtypes = $('#custompubtypeicon').data('pubtypes');
        var icons = $('#custompubtypeicon').data('icons');
        pubtypes.forEach(Function() {
          var elementclass = document.getElementsByClassName("icon-image-link");
          var index = $(pubtypes).indexOf($(this));
          elementclass.forEach(replace() {
            if ($(this).attr('onclick').indexOf('pbt=')+pubtypes[index] &gt; -1) {
              $(this).closest('.pubtype-icon').style.backgroundImage = icons[index];
              $(this).closest("div.record-icon p").text(pubtypes[index]);
            }
          });
        });
      });
    }
  } catch (err) {
    console.info(err);
  }
  </code></pre>
  
  <p>I am getting an error message <code>missing ) after argument list</code> which is preventing me from testing the rest of the code. I ran a validation on <a href="http://esprima.org/demo/validate.html" rel="nofollow noreferrer">http://esprima.org/demo/validate.html</a> and the problem is reported for line 12 as:</p>
  
  <blockquote>
    <p>"Unexpected identifier" (line 12 is var elementclass = document.getElementsByClassName("icon-image-link");)</p>
  </blockquote>
  
  <p>I imagine there are many more issues to solve until the code works properly, but this blocks me from continuing.
  I checked several solutions online (including here), but they all deal with simple missing brackets, and line 12 does not seem to have any missing elements.</p>