JavaScript - Comments duplicating on another div-CodePudding

I am creating a comment box and I managed to append whatever I type to a div I wanted, however I have added another input and trying to append that along with the comments, however when I do this the second time,it appends both the previous and current comment therefore the previous comment duplicates. I know I'm doing something wrong in my display_commnents function, however I'm not entirely sure what it could be, basically I just want whatever is entered on both title and comments to append on the comment-box with title on top and comment just below. Below is my code:

<div >
    <h1>Write New Post</h1>
    <form>
        <input id="title" type="text" placeholder="Title" value="">
        <textarea id="" placeholder="Leave us a comment" value=""></textarea>
        <input id="giphy" type="text">
        <div >
            <input id="submit" type="submit" value="comment">
            <button id="clear">Cancel</button>
        </div>
    </form>
</div>
<div >
    <h2>Comments</h2>
    <div id="comment-box" value="submit">
    </div>
</div>

And this is my JS code:

    const title = document.querySelector('#title')
const field = document.querySelector('textarea');
const textBackUp = title.getAttribute('placeholder')
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 titleText = document.getElementById('title')
const comments = document.getElementById('comment-box')

let title_arr = [];
let comments_arr = [];

title.onfocus = function(){
    this.setAttribute('placeholder', '')
}

title.onblur = function(){
    this.setAttribute('placeholder', textBackUp)
}

field.onfocus = function(){
    this.setAttribute('placeholder','')
    this.style.borderColor = '#333'
    btn.style.display = 'block'
} // when clicking on this, placeholder changes into ' ', border colour changes and buttons will appear.

field.onblur = function(){
    this.setAttribute('placeholder',backUp)
} //click away, placeholder returns

const display_comments = () => {
    let list = '<ul>'
    title_arr.forEach(title => {
    comments_arr.forEach(comment => {
        list  = `<li>${title} <br>${comment}`
    })
    })
    list  = '</ul>'
    comments.innerHTML = list
}

clear.onclick = function(e){
    e.preventDefault();
    btn.style.display = 'none'
    title.value = ''
    field.value = ''
    display_comments()
}

submit.onclick = function(e){
    e.preventDefault();
    const head = title.value;
    const content = field.value;
    if(head.length > 0){
        title_arr.push(head)
        display_comments();
        title.value = '';
    }
    if(content.length > 0){
        comments_arr.push(content)
        display_comments();
        field.value = '';
    }
}

any help would be appreciated

CodePudding user response：

The problem is that you have a double nested loop, producing a Cartesion product of the all the introduced titles and the comments.

To solve this, use only one array for collecting the input, so that title and comment are always kept together in one array entry. Such an entry can be an object with two properties, one for the title, and one for the comment.

Here is your code adapted, just for fixing that issue:

const title = document.querySelector('#title')
const field = document.querySelector('textarea');
const textBackUp = title.getAttribute('placeholder')
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 titleText = document.getElementById('title')
const comments = document.getElementById('comment-box')

let arr = []; // Only one array

title.onfocus = function(){
    this.setAttribute('placeholder', '');
}

title.onblur = function(){
    this.setAttribute('placeholder', textBackUp);
}

field.onfocus = function(){
    this.setAttribute('placeholder','');
    this.style.borderColor = '#333';
    btn.style.display = 'block';
}

field.onblur = function(){
    this.setAttribute('placeholder', backUp);
}

const display_comments = () => {
    let list = '<ul>';
    // Only one loop -- over objects with two properties
    arr.forEach(({head, content}) => {
        list  = `<li><b>${head}</b><br>${content}`;
    })
    list  = '</ul>';
    comments.innerHTML = list;
}

clear.onclick = function(e){
    e.preventDefault();
    btn.style.display = 'none';
    title.value = '';
    field.value = '';
    display_comments();
}

submit.onclick = function(e){
    e.preventDefault();
    const head = title.value;
    const content = field.value;
    // Only one if-block
    if(head.length > 0 || content.length > 0){
        arr.push({head, content}); // Only one push -- of an object 
        display_comments();
        title.value = '';
        field.value = '';
    }
}

<div >
    <h1>Write New Post</h1>
    <form>
        <input id="title" type="text" placeholder="Title" value="">
        <textarea id="" placeholder="Leave us a comment" value=""></textarea>
        <div >
            <input id="submit" type="submit" value="comment">
            <button id="clear">Cancel</button>
        </div>
    </form>
</div>
<div >
    <h2>Comments</h2>
    <div id="comment-box" value="submit">
    </div>
</div>