提问人：Bl1xvan 提问时间：7/17/2021 最后编辑：Sean KendleBl1xvan 更新时间：7/21/2021 访问量：90
尝试将“this”对象添加到数组 （Javascript）
Trying to add "this" object to an array (Javascript)
问：
我试图让它成为这样，当你按下一个按钮时，你会在页面上添加一个注释。当我按下按钮时，新音符闪烁。我试图让它留下来。
当我使用常规括号对象时，新注释会保留。我可以切换到使用一个，但我想知道是否可以在切换之前使它与“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>答：
2赞
Sean Kendle
7/17/2021
#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>评论
0赞
Bl1xvan
7/18/2021
还有一个问题。我刚刚在deleteNote按钮上添加了一个删除功能。按下时，它应该删除与该 ID 对应的音符。但是当它被按下时，所有的音符都会被删除。这是新的删除问题，它被添加到删除按钮中，如下所示function removeNote(id){ dummyNotes = dummyNotes.filter(pushNote => pushNote.id != id); init(); }<button class="deleteNote" onclick="removeNote(${this.id})">Delete</button>
0赞
Sean Kendle
7/19/2021
this.id不会给你笔记的 ID，因为在这种情况下是删除按钮。我敢打赌，如果你的 id，它是 ，然后当你得到它时，你会得到相同的数组。试试，看看你什么时候能得到你所期望的。此外，我会避免将内联 javascript 与常规 JS 混合使用。写入侦听器而不是内联处理程序...个人喜好，但对我来说更容易调试。thisconsole.lognullfilter()this.closest(".newNote").idconsole.logidonclick
0赞
Bl1xvan
7/19/2021
没有骰子。控制台日志显示“this.closest”不是一个函数
0赞
Bl1xvan
7/19/2021
我刚刚注意到。我在 removeNotes 函数中控制台记录了 dummyNotes 数组本身。当我单击删除按钮时，日志显示数组元素在那里;只有与我删除的注释的“id”匹配的元素消失了。但是，即使数组存在，它也不会显示在页面上。
0赞
Bl1xvan
7/19/2021
#2
要使删除按钮工作，我所要做的就是像这样编写init：
function init() {
noteList.innerHTML = "";
dummyNotes.forEach(addNewNote);
}
noteList.innerHTML 只需要放在顶部！
评论
0赞
Sean Kendle
7/23/2021
您应该将新问题与原始问题分开发布
评论
e.preventDefault()falseaddANote()