我正在做一个笔记应用程序:
我在 javascript 中创建了一个 const 'notes',它在内部分配了一个对象数组。每个对象都有一个标题和描述以及各自的值。
创建了一个分配给 const 'sortNotes' 的函数,该函数按标题(a 到 z)的字母顺序对对象进行排序。
创建了一个分配给 const 'notesOutput' 的函数,该函数为每个对象创建一个用于标题的元素 (h5) 和一个用于描述的元素 (p)。
创建了一个分配给 const 'newNote' 的函数,该函数在数组中创建具有相同属性(标题和描述)的新对象
最后,但并非最不重要的一点是,使用提交事件为表单创建了一个事件监听器。它负责在单击提交按钮时获取标题输入和描述输入的值。
然后我使用正确的参数调用函数“newNote”以在数组内创建一个新对象。 -- 显然它有效。
调用函数“notesOutput”在输出中显示带有标题和说明的新注释 - 显然它有效
之前,我将函数称为“sortNotes”,它负责按字母顺序从 A 到 Z 对笔记进行排序。所发生的事情并不像我预期的那样工作。它不需要计算输出中已有的注释以及之后新创建的注释,因此组织得不好。我想我必须更新这个负责 sort() 的函数“sortNotes”中的某些内容,但我不知道是什么。
const notes = [{
title: 'Bank',
description: 'Save 100€ every month to my account'
}, {
title: 'Next trip',
description: 'Go to spain in the summer'
}, {
title: 'Health',
description: 'Dont´forget to do the exams'
}, {
title: 'Office',
description: 'Buy a better chair and a better table to work'
}]
const sortNotes = function(notes) {
const organize = notes.sort(function(a, b) {
if (a.title < b.title) {
return -1
} else if (a.title > b.title) {
return 1
} else {
return 0
}
})
return organize
}
sortNotes(notes)
const notesOutput = function(notes) {
const ps = notes.forEach(function(note) {
const title = document.createElement('h5')
const description = document.createElement('p')
title.textContent = note.title
description.textContent = note.description
document.querySelector('#p-container').appendChild(title)
document.querySelector('#p-container').appendChild(description)
})
return ps
}
notesOutput(notes)
const newNote = function(titleInput, descriptionInput) {
notes.push({
title: titleInput,
description: descriptionInput
})
}
const form = document.querySelector('#form-submit')
const inputTitle = document.querySelector('#form-input-title')
inputTitle.focus()
form.addEventListener('submit', function(e) {
e.preventDefault()
const newTitle = e.target.elements.titleNote.value
const newDescription = e.target.elements.descriptionNote.value
newNote(newTitle, newDescription)
sortNotes(notes)
notesOutput(notes)
console.log(notes)
e.target.elements.titleNote.value = ''
e.target.elements.descriptionNote.value = ''
inputTitle.focus()
})
* {
font-family: 'Roboto', sans-serif;
color: white;
letter-spacing: .1rem;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: seagreen;
padding: 2rem;
}
.container-p {
padding: 2rem 0;
}
form {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
label {
text-transform: uppercase;
font-weight: 600;
letter-spacing: .25rem;
}
input,
textarea {
width: 100%;
padding: .5rem;
margin: 1rem 0;
color: #0d4927;
font-weight: bold;
font-size: 1rem;
}
.container-submit__button {
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
color: #0d4927;
padding: 1rem 2rem;
border: 2px solid #0d4927;
cursor: pointer;
margin: 1rem 0;
align-self: flex-end;
}
h1 {
font-size: 2rem;
letter-spacing: .3rem;
}
h2 {
font-size: 1.5rem;
font-weight: 300;
}
h5 {
font-size: 1.05rem;
margin: 1rem 0 .8rem 0;
padding: .4rem;
letter-spacing: .12rem;
display: inline-block;
border: 2px solid;
}
<div class="container" id="app-container">
<h1>NOTES APP</h1>
<h2>Take notes and never forget</h2>
<div id="p-container" class="container-p">
</div>
<div class="container-submit" id="app-container-submit">
<form action="" id="form-submit">
<label for="">Title</label>
<input type="text" class="input-title" id="form-input-title" name="titleNote">
<label for="">Description</label>
<textarea name="descriptionNote" id="form-input-description" cols="30" rows="10"></textarea>
<button class="container-submit__button" id="app-button" type="submit">Add Notes</button>
</form>
</div>
</div>
最佳答案
sort
对数组进行就地排序,这样您就不需要一个返回任何内容的函数您的排序区分大小写。如果您想再次区分大小写,请删除 toLowerCase
不要在函数中传递注释。它需要是一个全局对象
输出前清空容器
不用归还不用的东西
let notes = [{
title: 'Bank',
description: 'Save 100€ every month to my account'
}, {
title: 'Office',
description: 'Buy a better chair and a better table to work'
}, {
title: 'Health',
description: 'Dont´forget to do the exams'
}, {
title: 'Next trip',
description: 'Go to spain in the summer'
}]
const sortNotes = function(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase()) {
return -1
} else if (a.title.toLowerCase() > b.title.toLowerCase()) {
return 1
} else {
return 0
}
}
const notesOutput = function() {
document.querySelector('#p-container').innerHTML = "";
notes.sort(sortNotes)
notes.forEach(function(note) {
const title = document.createElement('h5')
const description = document.createElement('p')
title.textContent = note.title
description.textContent = note.description
document.querySelector('#p-container').appendChild(title)
document.querySelector('#p-container').appendChild(description)
})
}
const newNote = function(titleInput, descriptionInput) {
notes.push({
title: titleInput,
description: descriptionInput
})
}
const form = document.querySelector('#form-submit')
const inputTitle = document.querySelector('#form-input-title')
form.addEventListener('submit', function(e) {
e.preventDefault()
const newTitle = e.target.elements.titleNote.value
const newDescription = e.target.elements.descriptionNote.value
newNote(newTitle, newDescription)
notesOutput(notes)
e.target.elements.titleNote.value = ''
e.target.elements.descriptionNote.value = ''
inputTitle.focus()
})
notesOutput()
inputTitle.focus()
* {
font-family: 'Roboto', sans-serif;
color: white;
letter-spacing: .1rem;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: seagreen;
padding: 2rem;
}
.container-p {
padding: 2rem 0;
}
form {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
label {
text-transform: uppercase;
font-weight: 600;
letter-spacing: .25rem;
}
input,
textarea {
width: 100%;
padding: .5rem;
margin: 1rem 0;
color: #0d4927;
font-weight: bold;
font-size: 1rem;
}
.container-submit__button {
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
color: #0d4927;
padding: 1rem 2rem;
border: 2px solid #0d4927;
cursor: pointer;
margin: 1rem 0;
align-self: flex-end;
}
h1 {
font-size: 2rem;
letter-spacing: .3rem;
}
h2 {
font-size: 1.5rem;
font-weight: 300;
}
h5 {
font-size: 1.05rem;
margin: 1rem 0 .8rem 0;
padding: .4rem;
letter-spacing: .12rem;
display: inline-block;
border: 2px solid;
}
<div class="container" id="app-container">
<h1>NOTES APP</h1>
<h2>Take notes and never forget</h2>
<div id="p-container" class="container-p">
</div>
<div class="container-submit" id="app-container-submit">
<form action="" id="form-submit">
<label for="">Title</label>
<input type="text" class="input-title" id="form-input-title" name="titleNote">
<label for="">Description</label>
<textarea name="descriptionNote" id="form-input-description" cols="30" rows="10"></textarea>
<button class="container-submit__button" id="app-button" type="submit">Add Notes</button>
</form>
</div>
</div>
关于javascript - 如何使用新的输入数据更新 'sortNotes' 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58397419/