我有一个简单的笔记web 5应用程序.每次用户单击"+"按钮时，都会添加一个新注释.一旦他点击'⟳' 按钮全部排除.我想在用户单击的 sticky 中添加五个新项目槽.为了做到这一点，我需要知道他是怎么做的.这最后一点让我很困惑.如果所有按钮都是由用户生成的，我如何知道用户单击了哪个按钮？
HTML:
<html lang="en">
<head>
<title>To Do Lists</title>
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body>
<div class="top_bar">
<button id="plus">+</button>
<button id="restart">⟳</button>
</div>
<div id="notes" class="notes">
</div>
</body>
</html>
CSS
padding: 0px;
margin: 0px;
}
body{
display: flex;
flex-direction: column;
}
.top_bar{
width: 100%;
height: 10vh;
background-color: #95E29B;
display: flex;
align-items: center;
justify-content: space-between;
}
button{
font-size: 35px;
border: none;
width: 15%;
height: 10vh;
background-color: #3BCE4B;
cursor: pointer;
}
.notes{
width: 100%;
height: 90vh;
overflow: auto;
background-color: black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.note{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
height: 40vh;
width: 30%;
border-radius: 10px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-end;
}
.note_input{
margin-top: 20px;
margin-right: 5%;
font-size: 30px;
width: 90%;
border-style: solid;
border-top: none;
border-left: none;
border-right: none;
border-color: black;
}
form{
margin-top: 10px;
margin-right: 15%;
width: 80%;
height: 49%;
overflow-y: auto;
}
li{
border: none;
width: 70%;
display: flex;
}
.li_input{
border-style: solid;
border-color: black;
border-top: none;
border-left: none;
border-right: none;
margin-left: 10px;
font-size: 20px;
}
.more_items{
width: 35px;
height: 35px;
margin-right: 2%;
border-radius: 100%;
font-size: 20px;
}
JavaScript
const add_note = () => {
// Creates a new note and its props
const new_note = document.createElement("div");
const new_input = document.createElement("input");
const new_form = document.createElement("form");
const new_ol = document.createElement("ol");
const new_button = document.createElement("button");
//Populates the new note with inputs and checkboxes
for (let i = 0; i < 5; i++) {
let new_li = document.createElement("li");
let new_checkbox = document.createElement("input");
new_checkbox.setAttribute("type", "checkbox");
let new_li_input = document.createElement("input");
new_li_input.classList.add("li_input");
new_ol.appendChild(new_li);
new_li.appendChild(new_checkbox);
new_li.appendChild(new_li_input);
}
//New note's settings
new_note.classList.add("note");
new_note.appendChild(new_input);
new_input.classList.add("note_input");
new_input.setAttribute("placeholder", "Note's title");
new_note.appendChild(new_form);
new_ol.classList.add("ols");
new_form.appendChild(new_ol);
new_note.appendChild(new_button);
new_button.classList.add("more_items");
//Inserts the new note and button
const note_block = document.getElementById("notes");
note_block.appendChild(new_note);
new_button.addEventListener("click", add_more_items);
new_button.innerHTML = "+";
};
//Adds more items
const add_more_items = () => {
//console.log(new_button.parentElement.nodeName);
//let new_ol = document.getElementsByClassName("ols")[];
for (let i = 0; i < 5; i++) {
let new_li = document.createElement("li");
let new_checkbox = document.createElement("input");
new_checkbox.setAttribute("type", "checkbox");
let new_li_input = document.createElement("input");
new_li_input.classList.add("li_input");
new_ol.appendChild(new_li);
new_li.appendChild(new_checkbox);
new_li.appendChild(new_li_input);
}
};
//Removes all notes
const remove_note = () => {
let amount_of_notes = document.getElementsByClassName("note").length;
console.log(amount_of_notes);
while (amount_of_notes != 0) {
amount_of_notes--;
document.getElementsByClassName("note")[amount_of_notes].remove();
}
alert("All notes were removed.");
};
// Loads the buttons
const load_buttons = () => {
document.getElementById("plus").addEventListener("click", add_note);
document.getElementById("restart").addEventListener("click", remove_note);
};
// Main method
document.addEventListener("DOMContentLoaded", () => {
load_buttons();
});
提前谢谢.