此代码用于便签项目，该代码适用于第一个便签，但第一个便签之后出现故障
25
0
所以我正在制作这个便签添加项目，如果你点击“加号”图标，就会弹出一个窗口，你可以在其中输入带有你姓名的便签内容。对于第一个便签，它是......
所以我正在制作这个便签添加项目，如果你点击“加号”图标，就会弹出一个窗口，你可以在其中输入带有你姓名的便签内容。
对于第一个笔记，它运行良好，当我点击预览时，会弹出另一个窗口，我可以看到我的笔记在提交之前的实际外观，或者我可以在第一个窗口中点击“提交”将其保存在一个空容器中。
正如我所说的那样，它对于第一个注释运行良好，但是从第二个注释开始，“预览”按钮不起作用，所有注释都保存在预览中，但我希望它们像第一个注释一样保存在那个空容器中。
HTML
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="sticky.css"> </head> <body>
<div class="welcome">
<div class="text-1">
<h1 class="h1">Welcome to stickey Notez just stick something memorable </h1>
</div> </div>
<div class="plus">
<div class="icon-plus">
<div id="plus" class="fa-solid">+</div>
</div> </div>
<div id="newModel" class="model"> <h2>Note Form</h2> <div class="close" id="closeButton">X</div> <div id="notePreview" class="notez">
<!-- <label class="content" for="inputTitle">Name:</label> -->
<input class="content" placeholder="Name:" id="inputTitle" name="title">
<!-- <label class="content" for="inputContent">Content:</label> -->
<textarea class="content" placeholder="Content:" id="inputContent" name="content"></textarea>
<div class="color-opts">
<label class="color-option" style="background-color: rgb(131, 26, 26);">
</label>
<div class="color-option" style="background-color: rgb(118, 212, 117);">
</div>
<div class="color-option" style="background-color: rgb(250, 159, 220);">
</div>
<div class="color-option" style="background-color: rgb(102, 200, 215);">
</div>
</div>
</div> <div class="sutton"> <button type="button" id="submitNote">Submit</button> <button type="menu" id="noteMenu">Preview?</button> </div>
</div>
<div id="preview" class="preview1">
<div class="rutton">
<button type="button" id="submitNote1">Submit</button> <button type="menu" id="noteeMenu">Back?</button> </div> </div>
<div id="savedNotesContainer">
</div>
<script src="sticky.js"></script> <script src="https://kit.fontawesome.com/29e2b58a51.js" crossorigin="anonymous"></script> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
body{
padding: 0 40px;
display: grid;
/* align-items: center;
flex-direction: column; */
background: #0c0e16;
}
.h1{
font-family: 'Lobster',cursive;
display: flex;
justify-content: center;
font-size: 60px;
color: #cc00ff;
text-shadow: 2px 2px #601e6298;
}
.fa-solid{
color: #ffffff;
font-size: 70px;
position: fixed;
right: 50px;
bottom: 70px;
padding: 10px 14px;
border-radius: 50%;
transition: background 0.5s ease;
cursor: pointer;;
}
.fa-solid:hover{
background: #cc00ff2c;
}
.icon-plus{
display: flex;
position: absolute;
/* padding: 30px; */
flex-direction: column;
justify-content: center;
right: 70px;
top: 500px;
}
h2{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 35px;
color: white;
margin: 0 0 20px 0;
}
.model{
height: 400px;
width: 50%;
align-items: center;
display: none;
padding: 30px;
justify-self: center;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(67, 31, 44, 0.418);
position: relative;
border-radius: 20px;
position: absolute;
bottom: 100px;
}
.close{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
font-weight: bolder;
padding: 10px;
color: white;;
}
.close:hover{
color: red;
}
label{
display: block;
}
.color-opts{
display: flex;
margin: 10px;
}
.notez{
background-color: #0c0e16;
justify-content: center;
align-self: center;
flex-direction: column;
padding: 30px;
display: flex;
width: 40%;
border-radius: 20px;
}
.content{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: large;
color: rgb(105, 93, 218);
padding: 5px;
}
input, textarea{
background-color: transparent;
border: none;
width: 70%;
border-bottom: 1px dashed green;
margin: 10px;
/* resize: none; */
height: auto;
}
#inputTitle{
font-weight: bolder;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 30px;
color: white;
}
#inputContent{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: white;
}
input,textarea:focus{
outline: none;
}
textarea::-webkit-scrollbar {
width: 10px;
}
textarea::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}
textarea::-webkit-scrollbar-thumb {
background-color: rgba(53, 48, 48, 0.377);
cursor: pointer;
}
button{
padding: 10px 10px;
border: 3px solid rgb(255, 0, 0);
background-color: #0c0e16;
color: white;
font-size: medium;
cursor: pointer;
}
.color-option {
height: 45px;
width: 50px;
margin: 0 10px;
border-radius: 10px;
border: 2px solid black;
}
.sutton{
width: 100%;
display: flex;
justify-content: space-between;
}
.preview1{
height: 500px;
width: 600px;
display: none;
background-color: rgba(255, 255, 255, 0);
position: absolute;
bottom: 50px;
justify-content: center;
align-items: center;
flex-direction: column;
justify-self: center;
padding: 0 20px;
}
.note{
width: 340px;
height: 370px;
display: flex;
border-radius: 20px;
color: white;
font-size: 29px;
flex-direction: column;
padding: 10px;
margin: 20px;
align-items: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* .note h3{
} */
.rutton{
display: flex;
justify-content: space-between;
width: 100%;
}
JavaScript
document.addEventListener('DOMContentLoaded', function() {
const newModel = document.getElementById("newModel");
const plus = document.getElementById("plus")
const closeBtn = document.getElementById("closeButton")
const notePreview = document.getElementById("notePreview")
plus.addEventListener('click', () => {
if(newModel.style.display === "none"){
newModel.style.display = "flex"
}
else if(newModel.style.display = "flex"){
newModel.style.display = "none"
}
})
closeBtn.addEventListener('click',() =>{
newModel.style.display = "none"
}
)
const colorBtn = document.querySelectorAll(".color-option")
if (colorBtn.length > 0) {
notePreview.style.backgroundColor = getComputedStyle(colorBtn[0]).backgroundColor;
}
colorBtn.forEach(child => {
child.addEventListener('click', () => {
notePreview.style.backgroundColor = getComputedStyle(child).backgroundColor;
})
})
const noteMenu = document.getElementById("noteMenu");
const preview = document.getElementById("preview");
let newNote = null;
noteMenu.addEventListener('click', () => {
const title = document.getElementById("inputTitle");
const content = document.getElementById("inputContent");
const noteColor = getComputedStyle(notePreview).backgroundColor;
// const newNote = document.createElement('div');
// newNote.classList.add('note');
newNote = document.createElement('div');
newNote.className = 'note';
newNote.style.backgroundColor = noteColor;
newNote.innerHTML = `
<h3>${title.value}</h3>
<p>${content.value}</p>
`;
preview.appendChild(newNote);
// if (noteMenu === 'click') {
// Toggling the preview visibility
if (preview.style.display === "flex") {
preview.style.display = "none";
} else {
preview.style.display = "flex";
}
inputTitle.value = "";
inputContent.value = "";
newModel.style.display = "none";
})
const noteemenu = document.getElementById("noteeMenu");
const submiteNote = document.getElementById("submitNote");
const savedNotesContainer = document.getElementById("savedNotesContainer");
const submiteNote1 = document.getElementById("submitNote1");
noteemenu.addEventListener('click', () => {
preview.style.display = "none";
newModel.style.display = "flex"
// newNote.remove();
})
// const note = document.getElementsByClassName("note");
submiteNote.addEventListener('click', () => {
if (newNote) {
const savedNote = newNote.cloneNode(true); // Clone the previewed note
savedNotesContainer.appendChild(savedNote);
newNote = null;
preview.innerHTML = ''; // Clear the preview after submission
preview.style.display = "none"; // Hide the preview
} else {
console.log("No note to submit.");
}
});
submiteNote1.addEventListener('click', ()=>{
if (newNote) {
const savedNote = newNote.cloneNode(true); // Clone the previewed note
savedNotesContainer.appendChild(savedNote);
newNote = null;
preview.innerHTML = ''; // Clear the preview after submission
preview.style.display = "none"; // Hide the preview
} else {
console.log("No note to submit.");
}
})
})
收藏的用户（0）
X
正在加载信息~