Проблема
Визуализированные события буквального действия HTML-шаблона не будут работать
Стек MEVN с рулем
код
renderData.js
const template = function (data) {
return `<div class = "vvn_siteContent sc_flex">
<span class = "sc_flex">
<img src = "https://images.wallpaperscraft.com/image/single/keyboard_backlight_light_159518_1280x720.jpg" alt = "" class = "sc_img">
<div class = "sc_flex sc_column">
<label class = "sc_label">${data.category} :: ${data.titles.main}</label>
<div class = "sc_desc" style = "word-wrap: break-word">
${data.desc.main}
</div>
<div class = "vvn_editTypes">
<button class = "sc_button sc_resetBTN">Delete</button>
<button class = "sc_button sc_scheduleBTN" >Hide</button>
<button class = "sc_button sc_sendBTN" dataset-data = "${data._id}" onclick = "myData()" >Edit!</button>
</div>
</div>
</span>
</div>`
}
export const renderData = function (key) {
const keyToLowerCase = key.toLowerCase();
const getKeyData = handleJSON(keyToLowerCase);
getContainer.innerHTML = " ";
const parser = new DOMParser();
for (let i = 0; i < getKeyData[0][0].pageContent.length; i++) {
const { ...data } = getKeyData[0][0].pageContent[i];
const html = template(data);
const parsedDoc = parser.parseFromString(html, "text/html");
getContainer.append(...parsedDoc.body.children);
}
}
oneCRUD.js //это файл, который загружается через
<script type = "module" src = "../js/OneCRUD.js" type = "text/javascript" data = "{{data2}}"></script>
этот тег сценария находится внизу index.html
const allBtns = document.querySelectorAll('.vvn_editTypes').forEach(el => el.addEventListener('click', (e) => {
console.info(e.target)
console.info(e)
if (e.target.textContent === 'Delete') console.info('Deleting')
if (e.target.textContent === 'Hide') console.info('Hiding')
if (e.target.textContent === 'Edit!') console.info('Editing')
}))
function myData () {
console.info('this wont get called even if i gave the button onclick = "myData()")
}
Если я попытаюсь вызвать функцию в onclick
, я получу ошибку function name undefined
Моя проблема довольно проста. Я пытаюсь прикрепить события к кнопкам в renderData.js
из файла oneCRUD.js
, и это не работает.
Благодарим за помощь
я нашел решение
код
const allBtns = document.querySelectorAll('.vvn_siteContent').forEach(el => el.addEventListener('click', (e) => {
console.info(e.target)
console.info(e)
if (e.target.textContent === 'Delete') console.info('Deleting')
if (e.target.textContent === 'Hide') console.info('Hiding')
if (e.target.textContent === 'Edit!') console.info('Editing')
}))
обратите внимание, как элемент, который я выбираю, находится внутри литерала шаблона
Мне нужно выбрать родителя этого элемента.
так что теперь мой код выглядит так:
const allBtns = document.querySelectorAll('.vvn_siteContentList').forEach(el => el.addEventListener('click', (e) => {
console.info(e.target)
console.info(e)
if (e.target.textContent === 'Delete') console.info('Deleting')
if (e.target.textContent === 'Hide') console.info('Hiding')
if (e.target.textContent === 'Edit!') console.info('Editing')
}))
теперь функция allBtns
работает.
почему это работает?
Это хороший вопрос