尝试将“this”对象添加到数组（Javascript）答案

【问题标题】：Trying to add "this" object to an array (Javascript)尝试将“this”对象添加到数组（Javascript）
【发布时间】：2021-07-16 19:58:16
【问题描述】：

我正在努力做到这一点，因此当您按下按钮时，您会在页面上添加一条注释。当我按下按钮时，新的音符会闪烁。我正在努力让它留下来。

当我使用常规括号对象时，新注释会保留。我可以切换到使用一个，但我想知道是否可以在切换之前使其与“this”对象一起使用。

用于添加备注的按钮在“备注下拉”按钮下方

   var dummyNotes = [];

   class NewNote {
        constructor(id, title, details, date) {
            this.id = id;
            this.title = title;
            this.details = details;
            this.date = date;
            this.titleFormat = function() {
                return `<span class="titleSpan">
                            <input type="text" class="noteTitle inputControls" value="${this.title}" maxlength="50">
                            <label class="editLabel detailScript">0/50</label>
                            <label class="editLabel errorMessage">Character limit reached!</label>
                            <span class="noteButtons">                  
                                <button class="editTitle">Edit</button>
                                <button class="deleteNote">Delete</button>
                            </span>
                            <span class="noteInfo">
                                <label class="theDate">${this.date}</label>
                                <label class="theID">${this.id}</label>
                            </span>
                        </span>`;
            }
            this.detailsFormat = function() {
                return `<span class="detailsSpan">
                            <details><summary>Click for Details</summary>
                                <textarea class="noteDetails inputControls" maxlength="100">${this.details}</textarea>
                                <label class="editLabel detailScript">0/100</label>
                                <label class="editLabel errorMessage">Character limit reached!</label>
                                <button class="editDetails">Edit</button>
                            </details>  
                        </span>`;
                        }
                     }
                    }

    let newNoteInput = document.getElementById("newNoteInput");


    newNoteInput.addEventListener('submit', addANote);


    function addANote(){
        /*If this fails, just copy paste what's under, insert values */
        const pushNote = new NewNote(generateID(), newNoteTitle.value, newNoteDetails.value, dateNote.toLocaleDateString());
        dummyNotes.push(pushNote);
        addNewNote(pushNote);
        newNoteTitle.value = "";
        newNoteDetails.value = "";

    }

    function addNewNote(pushNote) {
        const theNewNote = document.createElement("div");
        theNewNote.classList.add("newNote");
        const theNewNoteForm = document.createElement("form");
        theNewNoteForm.classList.add("noteForm");
        theNewNote.appendChild(theNewNoteForm);
        theNewNoteForm.innerHTML = pushNote.titleFormat() + pushNote.detailsFormat();
        noteList.appendChild(theNewNote); /*APPEND CHILD to get every item on the list*/
    }

    function init() {
        dummyNotes.forEach(addNewNote);
        noteList.innerHTML = "";
    }

    init();

 
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="Notes.css">
        <meta name="viewport" content="width=device-width" initial-scale="1.0">
        <title>Notes</title>
    </head>

    <body>
        <div id="container">
            <div id="noteContainer">
                <details id="buttonContainer">
                    <summary id="toggleContainer">Note Drop-Down</summary>
                    <span id="newNoteToggle">
                        <form id="newNoteInput">
                            <span>
                                <input type="text" id="newNoteTitle" class="inputControls" placeholder="Title" maxlength="50">
                                <label class="newLabel detailScript">0/50</label>
                                <label class="newLabel errorMessage">Character limit reached!</label>
                            </span>
                            <span>
                                <input type="textarea" id="newNoteDetails" class="inputControls" placeholder="Details" maxlength="100">
                                <label class="newLabel detailScript">0/100</label>
                                <label class="newLabel errorMessage">Character limit reached!</label>
                            </span>
                            <button id="addButton">Add New Note</button>
                        </form>
                    </span>
                </details>
                <div id="noteList">
                    <div class="newNote">
                        <form class="noteForm">
                        <span class="titleSpan">
                            <input type="text" class="noteTitle" value="Note Title">
                            <button class="editTitle">Edit</button>
                            <button class="deleteNote">Delete</button>
                            <label class="theDate">The Date</label>
                            <label class="theDate">ID</label>
                        </span>
                        <span class="detailsSpan">
                            <details><summary>Click for Details</summary>
                                <textarea class="noteDetails"></textarea>
                                <button class="editDetails">Edit</button>
                                <span id="wordCount"></span>
                            </details>  
                        </span>
                        </form>
                    </div>
                </div>

            </div>
            <div id="searchContainer">
                <details id="searchForm">
                    <summary><h4>Search Notes</h4></summary>
                    <form>
                    <input id="searchDate" type="date" placeholder="Date">
                    <input id="searchTitle" type="text" placeholder="Title">
                    <button id ="searchButton">Search</button>
                    </form>
                </details>
            </div>
        </div>
        <script src="Notes.js"></script>
    </body>
</html>

【问题讨论】：

是否可以为您的问题创建sn-p？我你提到的示例代码，generateID和dateNote等函数没有定义。
您确定您的整个页面在提交时没有重新加载吗？在捕获表单提交后，您似乎没有在任何地方运行e.preventDefault()。你可能只是从addANote()返回false
我稍后会创建一个 sn-p，但首先让我看看 preventDefault 函数是否有效
preventDefault 有效！非常感谢肖恩·肯德尔！！
我已经发布了我的答案，请采纳并点赞

标签： javascript html object this appendchild

【解决方案1】：

是的，正如我所怀疑的那样，您的表单肯定是在没有阻止默认的情况下发布的。

请查看代码，我已对我所做的任何更改进行了评论。

//was getting errors for these variables not being defined.
var dummyNotes = [],
  dateNote = new Date();

   class NewNote {
        constructor(id, title, details, date) {
            this.id = id;
            this.title = title;
            this.details = details;
            this.date = date;
            this.titleFormat = function() {
                return `<span class="titleSpan">
                            <input type="text" class="noteTitle inputControls" value="${this.title}" maxlength="50">
                            <label class="editLabel detailScript">0/50</label>
                            <label class="editLabel errorMessage">Character limit reached!</label>
                            <span class="noteButtons">                  
                                <button class="editTitle">Edit</button>
                                <button class="deleteNote">Delete</button>
                            </span>
                            <span class="noteInfo">
                                <label class="theDate">${this.date}</label>
                                <label class="theID">${this.id}</label>
                            </span>
                        </span>`;
            }
            this.detailsFormat = function() {
                return `<span class="detailsSpan">
                            <details><summary>Click for Details</summary>
                                <textarea class="noteDetails inputControls" maxlength="100">${this.details}</textarea>
                                <label class="editLabel detailScript">0/100</label>
                                <label class="editLabel errorMessage">Character limit reached!</label>
                                <button class="editDetails">Edit</button>
                            </details>  
                        </span>`;
                        }
                     }
                    }

    let newNoteInput = document.getElementById("newNoteInput");

    //changed this function to run an anonymous function, prevent default and then call addANote():
    newNoteInput.addEventListener('submit', function(e) {
      e.preventDefault();
      addANote();
    });


    function addANote(){
        /*If this fails, just copy paste what's under, insert values */
        const pushNote = new NewNote(generateID(), newNoteTitle.value, newNoteDetails.value, dateNote.toLocaleDateString());
        dummyNotes.push(pushNote);
        addNewNote(pushNote);
        newNoteTitle.value = "";
        newNoteDetails.value = "";
        
        return false;
    }

    function addNewNote(pushNote) {
        const theNewNote = document.createElement("div");
        theNewNote.classList.add("newNote");
        const theNewNoteForm = document.createElement("form");
        theNewNoteForm.classList.add("noteForm");
        theNewNote.appendChild(theNewNoteForm);
        theNewNoteForm.innerHTML = pushNote.titleFormat() + pushNote.detailsFormat();
        noteList.appendChild(theNewNote); /*APPEND CHILD to get every item on the list*/
    }

    function init() {
        dummyNotes.forEach(addNewNote);
        noteList.innerHTML = "";
    }
    
    //was getting error due to this function not existing, so I threw this in here:
    function generateID() {
      return parseInt(Math.random() * 10000);
    }

    init();

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="Notes.css">
        <meta name="viewport" content="width=device-width" initial-scale="1.0">
        <title>Notes</title>
    </head>

    <body>
        <div id="container">
            <div id="noteContainer">
                <details id="buttonContainer">
                    <summary id="toggleContainer">Note Drop-Down</summary>
                    <span id="newNoteToggle">
                        <form id="newNoteInput">
                            <span>
                                <input type="text" id="newNoteTitle" class="inputControls" placeholder="Title" maxlength="50">
                                <label class="newLabel detailScript">0/50</label>
                                <label class="newLabel errorMessage">Character limit reached!</label>
                            </span>
                            <span>
                                <input type="textarea" id="newNoteDetails" class="inputControls" placeholder="Details" maxlength="100">
                                <label class="newLabel detailScript">0/100</label>
                                <label class="newLabel errorMessage">Character limit reached!</label>
                            </span>
                            <button id="addButton">Add New Note</button>
                        </form>
                    </span>
                </details>
                <div id="noteList">
                    <div class="newNote">
                        <form class="noteForm">
                        <span class="titleSpan">
                            <input type="text" class="noteTitle" value="Note Title">
                            <button class="editTitle">Edit</button>
                            <button class="deleteNote">Delete</button>
                            <label class="theDate">The Date</label>
                            <label class="theDate">ID</label>
                        </span>
                        <span class="detailsSpan">
                            <details><summary>Click for Details</summary>
                                <textarea class="noteDetails"></textarea>
                                <button class="editDetails">Edit</button>
                                <span id="wordCount"></span>
                            </details>  
                        </span>
                        </form>
                    </div>
                </div>

            </div>
            <div id="searchContainer">
                <details id="searchForm">
                    <summary><h4>Search Notes</h4></summary>
                    <form>
                    <input id="searchDate" type="date" placeholder="Date">
                    <input id="searchTitle" type="text" placeholder="Title">
                    <button id ="searchButton">Search</button>
                    </form>
                </details>
            </div>
        </div>
        <script src="Notes.js"></script>
    </body>
</html>

【讨论】：

还有一个问题。我刚刚在 deleteNote 按钮上添加了一个删除功能。按下时，它应该删除与该 ID 对应的注释。但是当它被按下时，所有的音符都会被删除。这是新的删除问题function removeNote(id){ dummyNotes = dummyNotes.filter(pushNote => pushNote.id != id); init(); } 它已像这样添加到删除按钮<button class="deleteNote" onclick="removeNote(${this.id})">Delete</button>
this.id 不会给你笔记的 id，因为在这种情况下this 是删除按钮。我敢打赌，如果你 console.log 的 id 是 null，那么当你 filter() 它时，你会得到相同的数组。试试this.closest(".newNote").id，看看当你console.log 和id 时，你是否得到了你所期望的。另外，我会避免将内联 javascript 与常规 JS 混合。编写侦听器而不是内联 onclick 处理程序...个人喜好，但对我来说更容易调试。
没有骰子。控制台日志显示“this.closest”不是函数
我刚刚注意到。我在 removeNotes 函数中控制台记录了 dummyNotes 数组本身。当我单击删除按钮时，日志显示数组元素在那里；只有与我删除的笔记的“id”匹配的元素消失了。但即使数组存在，它也不会显示在页面上。

【解决方案2】：

要使删除按钮起作用，我所要做的就是像这样编写 init：

function init() {
    noteList.innerHTML = "";
    dummyNotes.forEach(addNewNote);  
}

noteList.innerHTML 只需要在顶部！

【讨论】：

您应该将新问题与原始问题分开发布