Ошибка Uncaught SyntaxError: missing ) after argument list при создании элементов

Question

Пытаюсь создать галерею с вложенным блоками, где меняется только порядковый номер картинки. Не выходит. Консоль выдает синтаксическую ошибку. Десять раз всё проверил, вроде, всё на месте. Не могу понять, почему не работает и как это исправить. Код на странице:

<div class="grid" id="parent">              
</div>
        
<script>    
$( document ).ready(function() {    
  let parent = document.getElementById("parent");
for (let i = 1; i <= 9; i++) {
  let div = document.createElement('div');
    div.setAttribute("class", "grid__item");
    div.setAttribute("data-size", "564x564");
let a = document.createElement('a');
    a.setAttribute("class", "img-wrap");
    a.setAttribute("href", "img/original/"+ i +".jpg");
  div.appendChild(a);
let img = document.createElement('a');
   img.setAttribute("src", "img/thumbs/"+ i +".jpg");
  a.appendChild(img);
parent.appendChild(div);
}
};
</script>

Подскажите, пожалуйста, в чем может быть проблема, и как её решить?

Answer 1

Ты забыл поставить круглую скобку в конце.

<div class="grid" id="parent">              
</div>
        
<script>    
$( document ).ready(function() {    
  let parent = document.getElementById("parent");
for (let i = 1; i <= 9; i++) {
  let div = document.createElement('div');
    div.setAttribute("class", "grid__item");
    div.setAttribute("data-size", "564x564");
let a = document.createElement('a');
    a.setAttribute("class", "img-wrap");
    a.setAttribute("href", "img/original/"+ i +".jpg");
  div.appendChild(a);
let img = document.createElement('a');
   img.setAttribute("src", "img/thumbs/"+ i +".jpg");
  a.appendChild(img);
parent.appendChild(div);
}
}); // Здесь
</script>

Answer 2

Немного не по теме..

Раз у вас подключен jQuery, почему бы и не продолжить писать на нём?

$(document).ready(function() {
  let parent = $('#parent'),
      tmp = '<div class="grid__item"><a class="img-wrap"></a><img></div>',
      temp;
  for(let i = 1; i <= 9; i++) {
    temp = $(tmp);
    temp.attr('data-size', '564x564');
    temp.find('a.img-wrap').attr('href', 'img/original/'+i+'.jpg');
    temp.find('img').attr('href', 'img/thumbs/'+i+'.jpg');
    parent.append(temp);
  }
  delete parent, tmp, temp;
});

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid__item {
  display: block;
  width: 100px;
  height: 50px;
  background: #ccc;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grid" id="parent"></div>

БЛОГ НА HUSL

Ошибка Uncaught SyntaxError: missing ) after argument list при создании элементов

Ответы (2 шт):