CODEWITHSUNDEEP
javascriptjqueryhtmlbackground-imagecustom-data-attribute
Nimrod Yanai
Nimrod Yanai

Reputation: 819

Replacing background image and element text

I am building a script to inject a custom text and image to an HTML page with a rather complicated structure:

<ul class="list">
    <li class="result">
      <div class="div_result">
        <div class="display">
          <div class="record-icon pubtype">
            <span class="pubtype-icon"></span>
            <p class="text">icon text</p>
          </div>
          <div class="links">
            <span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String<a/></span>
            <span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String<a/></span>
            <span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String<a/></span>
          </div>
        </div>
      </div>
    </li>
  </ul>

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:

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] > -1) {
            $(this).closest('.pubtype-icon').style.backgroundImage = icons[index];
            $(this).closest("div.record-icon p").text(pubtypes[index]);
          }
        });
      });
    });
  }
} catch (err) {
  console.info(err);
}

I am getting an error message missing ) after argument list which is preventing me from testing the rest of the code. I ran a validation on http://esprima.org/demo/validate.html and the problem is reported for line 12 as:

"Unexpected identifier" (line 12 is var elementclass = document.getElementsByClassName("icon-image-link");)

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.

Upvotes: 0

Views: 49

Answers (1)

Matus Dubrava
Matus Dubrava

Reputation: 14462

Check these mistakes

  • pubtypes.forEach(Function() { line should be pubtypes.forEach(function() { - function without capital F
  • elementclass.forEach(replace() { again it should be function not replace - elementclass.forEach(function () {
  • <a>...<a/> should be <a>...</a>

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(function () {
          if ($(this).attr('onclick').indexOf('pbt=')+pubtypes[index] > -1) {
            $(this).closest('.pubtype-icon').style.backgroundImage = icons[index];
            $(this).closest("div.record-icon p").text(pubtypes[index]);
          }
        });
      });
    });
  }
} catch (err) {
  console.info(err);
}
<ul class="list">
  <li class="result">
    <div class="div_result">
      <div class="display">
        <div class="record-icon pubtype">
          <span class="pubtype-icon"></span>
          <p class="text">icon text</p>
        </div>
        <div class="links">
          <span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String</a></span>
          <span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String</a></span>
          <span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String</a></span>
        </div>
      </div>
    </div>
  </li>
</ul>

Upvotes: 1

Related Questions