function renderComments(data) { var cdiv = div.querySelector('.comments') cdiv.innerHTML = `

${icon.down} Comments

` comments.forEach(comment => { var c = document.createElement('div') c.className = 'comment' c.innerHTML = `
${comment.name}
${comment.date}
${comment.text}
` cdiv.append(c) }) var add = document.querySelector('.add-comment') add.style.display = 'block' cdiv.append(add) } document.querySelector('button#add-comment').addEventListener('click', event => { var data = {}, csrf; document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => { if (input.name == 'csrfmiddlewaretoken') { csrf = input.value.trim() } else { data[input.name] = input.value.trim() if (!data[input.name]) { delete data[input.name] } } }) data.item = pandora.comment fetch("/comment/", { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrf }, body: JSON.stringify(data) }).then(response => { return response.json() }).then(response => { var comment= document.createElement('div') comment.classList.add('comment') var name = document.createElement('div') name.classList.add('name') name.innerText = response.name comment.append(name) var date = document.createElement('div') date.classList.add('date') date.innerText = response.date comment.append(date) var text = document.createElement('div') text.classList.add('name') text.innerText = response.text comment.append(text) document.querySelector('.comments').append(comment) document.querySelector('.add-comment textarea').value = '' }) })