insertAdjacentHTML не хочет отрисовывать элемент
нужна помощь уважаемого сообщества, а то я уже совсем голову сломал, не могу понять... есть код:
import {data} from './data.js'
let currInd = 0
let itemsPerPage = 3
const moreBtn = document.querySelector('.btn_more')
// const back = document.querySelector('.back')
const body = document.querySelector('body')
console.log('selectors initialized');
function loadItems() {
console.log('loading items..');
const part = data.slice(currInd, currInd + itemsPerPage)
let block = ``
for (let index = 0; index < part.length; index++) {
block += `
<div class="item">
<img class="portfolio_img" src="${part[index].image}" alt="Caffee_preview">
<h3><a href="${part[index].url}">${part[index]['site-name']}</a></h3>
</div>`
}
document.querySelector('.container').innerHTML += block
currInd += itemsPerPage
console.log('items loaded');
const container = document.querySelector('.container')
const items = container.querySelectorAll('.portfolio_img')
items.forEach(item => {
item.addEventListener('click', (event) => {
console.log('item clicked');
const str = event.target.src
// console.log(str.slice(str.indexOf('a')));
findItems(str.slice(str.indexOf('a')));
body.classList.add('no-scroll')
})
})
if (currInd >= data.length){
moreBtn.style.display = 'none'
}
}
moreBtn.addEventListener('click', loadItems)
loadItems()
function findItems(targ) {
console.log('finding items');
for (let i = 0; i < data.length; i++) {
if (targ === data[i].image) {
let item = data[i];
body.insertAdjacentHTML("afterbegin", `
<div class="pop-up">
<h2 class="pop-up__site-name">${item['site-name']}</h2>
<p class="pop-up__description">${item['description']}</p>
<a class="pop-up__url" href="${item['url']}">${item['title']}</a>
<div class="pop-up__image-container">
<img class="pop-up__img" src="${item['layout']}" alt="">
</div>
<div class="back">back to main</div>
</div>
`);
console.log('pop-up created');
document.querySelector('.back').addEventListener('click', () => {
document.querySelector('.pop-up').remove();
body.classList.remove('no-scroll')
})
break
}
}
}
конкретная проблема с функцией findItems
функция должна отрисовать модальное окно при клике на ранее отрисованные картинки, но...
в моем локальном репо, в vs code страница запущенная через life server, все выполняет правильно и все показывает
но стоит мне отправить коммит на гитхаб
и пройти по ссылке как... модальное окно не открывается и хоть ты тресни... сперва я даже подумал, что дело в гит хабе и завел тему
но в этой теме коллега insolor убeдительно показал, что дело не в гитхаб...
с такой же проблемой я сталкиваюсь, если хочу просмотреть страницу используя HTML Preview - он ведет себя так же как и гитхаб...