for (post of posts) { //Posts are retrieved from a Python Django function
let expandContent = '';
let postDesc = post.fields.description;
if (post.fields.description.length > 227) {
expandContent = `<p class="btn btn-link" onclick="this.innerHTML = ${postDesc}">Read more</p>`;
};
output += `<p class="card-text" style="white-space: pre-line;">${post.fields.description.substring(0, 227)} ${expandContent}</p>`;
}
However, upon clicking the read more button:
Uncaught SyntaxError: unexpected token: identifierlocalhost:8000:1:22
I attempted to eliminate the onclick and instead add this at the end:
$('#mainPosts').append(output)
function showMore() {
$('.readMore').click(function(e) {
e.preventDefault();
$(this).parent().html(`<br>${post.fields.description}`)
})
}
let g = document.createElement('script');
let s = document.getElementsByTagName('script')[0]
g.text = showMore();
s.parentNode.insertBefore(g, s)
The issue lies in the fact that it doesn't replace the substring of the current post description with the full one; rather, it replaces it with the complete description of the very last post in the list!