Замена фонового изображения и текста элемента

Question

Я создаю сценарий для вставки пользовательского текста и изображения на страницу HTML с довольно сложной структурой:

<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>

Я написал JavaScript, предназначенный для поиска определенной подстроки вэлементы и, если таковые существуют, для изменения фонового изображения диапазона .icon и текста элемента .text p на основе ввода от пользователя:

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);
}

Я получаю сообщение об ошибкеmissing ) after argument list, что мешает мне протестировать остальную часть кода.Я запустил проверку на http://esprima.org/demo/validate.html, и для строки 12 сообщается о проблеме:

"Неожиданный идентификатор" (строка 12 - это var elementclass = document.getElementsByClassName ("icon-image-ссылка ");)

Я предполагаю, что есть еще много вопросов, которые нужно решить, пока код не заработает должным образом, но это мешает мне продолжать.Я проверил несколько решений онлайн (в том числе и здесь), но все они имеют дело с простыми пропущенными скобками, и в строке 12, по-видимому, отсутствуют пропущенные элементы.

Answer 1

Проверьте эти ошибки

• pubtypes.forEach(Function() { строка должна быть pubtypes.forEach(function() { - функция без заглавной буквы F
• elementclass.forEach(replace() { снова должна быть function не replace - elementclass.forEach(function () {
• <a>...<a/> должно быть <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>