Absolute beginner programmer here. I'm trying to create a comments box where whatever you type in the comments, will be stored in another div. I got some of it to work, it was able to append however, it disappears straight after. I want it to store the comments in the #comment-box div and when you enter another comment it stores it underneath. Here is my code so far
<div >
<h2>Leave us a comment</h2>
<form>
<textarea id="" placeholder="Add Your Comment" value=" "></textarea>
<div >
<input id="submit" type="submit" value="Comment">
<button id="clear">
🙏</button>
</div>
</form>
</div>
<div >
<h2>Comments</h2>
<div id="comment-box" value="submit">
</div>
</div>
and my JS is
const field = document.querySelector('textarea');
const backUp = field.getAttribute('placeholder')
const btn = document.querySelector('.btn');
const clear = document.getElementById('clear')
const submit = document.querySelector('#submit')
// const comments = document.querySelector('#comment-box')
const comments = document.getElementById('comment-box')
field.onfocus = function(){
this.setAttribute('placeholder','')
this.style.borderColor = '#333'
btn.style.display = 'block'
} // when clicking on this, placeholder changes into ' '.
field.onblur = function(){
this.setAttribute('placeholder',backUp)
} //click away, placeholder returns
clear.onclick = function(){
btn.style.display = 'none';
field.value = ' '
submit.onclick = function(){
submit.style.display = 'none';
const content = document.createTextNode(field.value)
comments.appendChild(content)
Where am I going wrong guys? Any feedback would be appreciated. Thank You
CodePudding user response:
- you can use an array to store comments, and a function that generate html list of comments based on the array
- on submit and clear you should use
event.preventDefault();
to prevent the form from submitting to another page - on submit and clear you can manipulate the array and call the html generation function to recreate the commets-box content.
const field = document.querySelector('textarea');
const backUp = field.getAttribute('placeholder')
const btn = document.querySelector('.btn');
const clear = document.getElementById('clear')
const submit = document.querySelector('#submit')
// const comments = document.querySelector('#comment-box')
const comments = document.getElementById('comment-box');
// array to store the comments
const comments_arr = [];
// to generate html list based on comments array
const display_comments = () => {
let list = '<ul>';
comments_arr.forEach(comment => {
list = `<li>${comment}</li>`;
})
list = '</ul>';
comments.innerHTML = list;
}
clear.onclick = function(event){
event.preventDefault();
// reset the array
comments_arr.length = 0;
// re-genrate the comment html list
display_comments();
}
submit.onclick = function(event){
event.preventDefault();
const content = field.value;
if(content.length > 0){ // if there is content
// add the comment to the array
comments_arr.push(content);
// re-genrate the comment html list
display_comments();
// reset the textArea content
field.value = '';
}
}
<div >
<h2>Leave us a comment</h2>
<form>
<textarea id="" placeholder="Add Your Comment" value=" "></textarea>
<div >
<input id="submit" type="submit" value="Comment">
<button id="clear">
🙏</button>
</div>
</form>
</div>
<div >
<h2>Comments</h2>
<div id="comment-box">
</div>
</div>