I have an html template that i'm using template literals for. The function looks like the below
// postCreator.js
export const blogPostMaker = ({ title, content, address, id }, deletePost) => {
const innerHtml = `
<blog-post>
<h1 class='title'>${title}</h1>
<p class='content'>${content}</p>
<p class='address'>${address}</p>
<button onclick='${() => deletePost(id)}'>Delete</button>
</blog-post>
`
return innerHtml
}
//Blog.js
postHelper.getSeriesOfPosts(10)
.then(resp => {
resp.forEach(post => (blogDiv.innerHTML += blogPostMaker(post, postHelper.deletePost)))
})
What I can't figure out is how to get the onclick to work. I've tried passing in an anon function in Blog.js
to the postCreator
as well with no luck.
Any ideas?
If you don't want to expose the event callback globally, you should attach it in the JS part of the code with
addEventListener()
:Note: it's not the most efficient way to do it but it keeps your file structure.
Instead I would create the
<button>
directly withcreateElement()
and then add it to DOM withappendChild()
, or I would use a DocumentFragment or a<template>
in order to avoidquerySelector()
on all of theblogDiv
.If you absolutely want to use inline JS without exposing the helper you'll need to define your as a component (for example a Custom Element).