JavaScript-評論在另一個div上重復

我正在創建一個評論框，我設法將我輸入的任何內容附加到我想要的 div 中，但是我添加了另一個輸入并嘗試將其與評論一起附加，但是當我第二次這樣做時，它會附加上一個和當前評論因此先前的評論重復。我知道我在 display_commnents 函式中做錯了，但是我不完全確定它可能是什么，基本上我只是希望在標題和評論中輸入的任何內容都附加在頂部標題和評論的評論框中略低于。下面是我的代碼：

<div class="container">
    <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 class="btn">
            <input id="submit" type="submit" value="comment">
            <button id="clear">Cancel</button>
        </div>
    </form>
</div>
<div class="comments">
    <h2>Comments</h2>
    <div id="comment-box" value="submit">
    </div>
</div>

這是我的 JS 代碼：

    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 = '';
    }
}

任何幫助，將不勝感激

uj5u.com熱心網友回復：

問題是你有一個雙重嵌套回圈，產生所有引入的標題和評論的笛卡爾積。

為了解決這個問題，只使用一個陣列來收集輸入，這樣標題和評論總是一起保存在一個陣列條目中。這樣的條目可以是具有兩個屬性的物件，一個用于標題，一個用于注釋。

這是您修改的代碼，僅用于解決該問題：

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 class="container">
    <h1>Write New Post</h1>
    <form>
        <input id="title" type="text" placeholder="Title" value="">
        <textarea id="" placeholder="Leave us a comment" value=""></textarea>
        <div class="btn">
            <input id="submit" type="submit" value="comment">
            <button id="clear">Cancel</button>
        </div>
    </form>
</div>
<div class="comments">
    <h2>Comments</h2>
    <div id="comment-box" value="submit">
    </div>
</div>

標籤：javascript html

上一篇：為什么我的div元素沒有正常增長？

下一篇：jquery附加的divonclick第一次不起作用