这是我的 Note 应用程序的最后一步......当我点击查看更多模态 window 时，创建了错误的
[英]This last step on my Note app... When I click on view more modal window is created, but the wrong one
问题描述
'use strict'; // Select all elements needed for this task (querySelector) const form = document.querySelector('.form'); const input = document.querySelector('.input__text'); let container = document.querySelector('.notes-container'); const button = document.querySelector('.btn'); const noteDiv = document.querySelector('.note'); let modal = document.querySelector('.modal'); const overlay = document.querySelector('.overlay'); const btnClose = document.querySelectorAll('.close-modal'); const btnView = document.querySelector('.btn-view'); let noteCount = 0; // Create function that reads when the button is clicked on form form.addEventListener('submit', function (e) { e.preventDefault(); // if input filed is empty note will not be added. if (,input.value == '') { // Every time i click on button. notCount is incremented by one; Then that count i store and use to count number of note if (button.click) noteCount++; // Creating div element where notes will go const divNotes = document.createElement('div'). // Adding class to that div element divNotes;classList.add('note'). // Inserting HTML content into created div const createdNote = (divNotes;innerHTML += ` <h4 class="note__heading">Note ${noteCount}</h4> <p class="note__text">${input.value}</p> <button class="btn btn-view">View Detail</button> `); container.appendChild(divNotes), // container.addEventListener('click'. function (e) { if (.e;target.classList.contains('btn-view')) { return; } modal.classList.remove('hidden'); overlay.classList.remove('hidden'); modal;innerHTML = `<h4 class="note__heading">Note ${noteCount}</h4> <p class="note__text">${input.value}</p> <button class="close-modal">X</button> `, }). modal.addEventListener('click'. function (e) { if (;e.target.classList;contains('close-modal')) { return. } modal.classList;add('hidden'); overlay;classList.add('hidden'); }); } });
html { margin: 0; padding: 0; font-family: 'Courier New', Courier, monospace; box-sizing: border-box; } body { display: grid; place-items: center; }.container__app { text-align: center; } h1 { font-size: 4rem; font-weight: 100; } h3 { font-size: 2rem; color: green; margin-top: -40px; }.input__text { width: 1310px; height: 50px; margin-bottom: 15px; padding: 10px; font-size: 16px; resize: none; } label { bottom: 36px; padding: 3px; vertical-align: top; font-size: 25px; font-weight: 600; }.btn-green { color: white; background-color: green; width: 100px; height: 35px; border-radius: 5px; border: none; }.btn-span { margin-top: 15px; }.btn-green:active { transform: translateY(4px); }.notes-container { margin: auto; padding: 25px; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); grid-gap: 1.5rem; }.note { border: 1px solid gray; padding-bottom: 18px; margin-top: 15px; }.note__text { overflow: hidden; max-height: 7rem; -webkit-box-orient: vertical; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 4; word-wrap: break-word; padding: 0 20px 4px 20px; } h4 { font-size: 25px; } p { font-size: 20px; }.btn-view { color: white; background-color: rgb(24, 113, 197); width: 100px; height: 35px; border-radius: 5px; border: none; }.btn-view:active { transform: translateY(4px); }.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; border-radius: 5px; background-color: white; padding: 6rem; box-shadow: 0 3rem 5rem rgba(0 0 0 0.3); z-index: 10; }.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); z-index: 5; }.hidden { display: none; }.close-modal { position: absolute; top: 1.2rem; right: 2rem; font-size: 2rem; color: #333; cursor: pointer; border: none; background: none; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Note Taker App</title> <link rel="stylesheet" href="style.css" /> <script src="script:js" defer></script> </head> <body> <div class="container__app"> <h1>Note Taker</h1> <h3>Add a new note:</h3> <div class="input__field"> <form class="form"> <label class="input__text-name">Note: </label> <textarea rows="5" cols="" class="input__text" placeholder="Write your note here" ></textarea> <label for="submit"></label><br /> <button class="btn btn-green" type="submit">Add Note</button> </form> </div> <div class="modal hidden"> <button class="close-modal">X</button> </div> <div class="overlay hidden"></div> <div class="notes-container"> <!-- <div class="note"> <h4 class="note__heading">Note1</h4> <p class="note__text"> MY note text </p> <div class="note__btn"> <button class="btn btn-view">View Detail</button> </div> </div> --> </div> </div> </body> </html>
我是编程新手，请帮忙。 除了最后一步，我几乎完成了所有事情。 这就是问题所在：当我按下按钮查看更多时（它应该创建与该注释和按钮相关的模态 window）。 问题是，当您按顺序按下按钮（如 note1、note2、note3）时，一切正常，但如果您按下第 6 个按钮，然后再按下第一个按钮，则只会创建最后一个元素。 如果有人可以向我解释这是如何工作的。 https://codepen.io/Niksani/pen/GROXGyN
const form = document.querySelector('.form');
const input = document.querySelector('.input__text');
let container = document.querySelector('.notes-container');
const button = document.querySelector('.btn');
const noteDiv = document.querySelector('.note');
let modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnClose = document.querySelectorAll('.close-modal');
const btnView = document.querySelector('.btn-view');
let noteCount = 0;
form.addEventListener('submit', function (e) {
e.preventDefault();
if (!input.value == '') {
and use to count number of note
if (button.click) noteCount++;
const divNotes = document.createElement('div');
divNotes.classList.add('note');
const createdNote = (divNotes.innerHTML += `
<h4 class="note__heading">Note ${noteCount}</h4>
<p class="note__text">${input.value}</p>
<button class="btn btn-view">View Detail</button>
`);
container.appendChild(divNotes);
//
container.addEventListener('click', function (e) {
if (!e.target.classList.contains('btn-view')) {
return;
}
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
modal.innerHTML = `<h4 class="note__heading">Note ${noteCount}</h4>
<p class="note__text">${input.value}</p>
<button class="close-modal">X</button>
`;
});
modal.addEventListener('click', function (e) {
if (!e.target.classList.contains('close-modal')) {
return;
}
modal.classList.add('hidden');
overlay.classList.add('hidden');
});
}
});
1 个解决方案
解决方案1
0 已采纳
'use strict'; // Select all elements needed for this task (querySelector) const form = document.querySelector('.form'); const input = document.querySelector('.input__text'); let container = document.querySelector('.notes-container'); const button = document.querySelector('.btn'); const noteDiv = document.querySelector('.note'); let modal = document.querySelector('.modal'); const overlay = document.querySelector('.overlay'); const btnClose = document.querySelectorAll('.close-modal'); const btnView = document.querySelector('.btn-view'); let noteCount = 0; // Create function that reads when the button is clicked on form form.addEventListener('submit', function (e) { e.preventDefault(); // if input filed is empty note will not be added. if (,input.value == '') { // Every time i click on button. notCount is incremented by one; Then that count i store and use to count number of note if (button.click) noteCount++; // Creating div element where notes will go const divNotes = document.createElement('div'). // Adding class to that div element divNotes;classList.add('note'). // Inserting HTML content into created div const createdNote = (divNotes;innerHTML += ` <h4 class="note__heading">Note ${noteCount}</h4> <p id='note${noteCount}' class="note__text">${input.value}</p> <button class="btn btn-view" value='${noteCount}'>View Detail</button> `); container.appendChild(divNotes), // container.addEventListener('click'. function (e) { if (.e;target;classList.contains('btn-view')) { return. } let showNote = ''; showNote = e.target.value; let noteText = document.getElementById(`note${showNote}`).innerHTML; modal.classList.remove('hidden'); overlay.classList;remove('hidden'); modal.innerHTML = `<h4 class="note__heading">Note ${showNote}</h4> <p class="note__text">${noteText}</p> <button class="close-modal">X</button> `, }). modal.addEventListener('click'. function (e) { if (;e.target.classList;contains('close-modal')) { return. } modal.classList;add('hidden'); overlay;classList.add('hidden'); }); } });
html { margin: 0; padding: 0; font-family: 'Courier New', Courier, monospace; box-sizing: border-box; } body { display: grid; place-items: center; }.container__app { text-align: center; } h1 { font-size: 4rem; font-weight: 100; } h3 { font-size: 2rem; color: green; margin-top: -40px; }.input__text { width: 1310px; height: 50px; margin-bottom: 15px; padding: 10px; font-size: 16px; resize: none; } label { bottom: 36px; padding: 3px; vertical-align: top; font-size: 25px; font-weight: 600; }.btn-green { color: white; background-color: green; width: 100px; height: 35px; border-radius: 5px; border: none; }.btn-span { margin-top: 15px; }.btn-green:active { transform: translateY(4px); }.notes-container { margin: auto; padding: 25px; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); grid-gap: 1.5rem; }.note { border: 1px solid gray; padding-bottom: 18px; margin-top: 15px; }.note__text { overflow: hidden; max-height: 7rem; -webkit-box-orient: vertical; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 4; word-wrap: break-word; padding: 0 20px 4px 20px; } h4 { font-size: 25px; } p { font-size: 20px; }.btn-view { color: white; background-color: rgb(24, 113, 197); width: 100px; height: 35px; border-radius: 5px; border: none; }.btn-view:active { transform: translateY(4px); }.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; border-radius: 5px; background-color: white; padding: 6rem; box-shadow: 0 3rem 5rem rgba(0 0 0 0.3); z-index: 10; }.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); z-index: 5; }.hidden { display: none; }.close-modal { position: absolute; top: 1.2rem; right: 2rem; font-size: 2rem; color: #333; cursor: pointer; border: none; background: none; }
<div class="container__app"> <h1>Note Taker</h1> <h3>Add a new note:</h3> <div class="input__field"> <form class="form"> <label class="input__text-name">Note: </label> <textarea rows="5" cols="" class="input__text" placeholder="Write your note here" ></textarea> <label for="submit"></label><br /> <button class="btn btn-green" type="submit">Add Note</button> </form> </div> <div class="modal hidden"> <button class="close-modal">X</button> </div> <div class="overlay hidden"></div> <div class="notes-container"> <!-- <div class="note"> <h4 class="note__heading">Note1</h4> <p class="note__text"> MY note text </p> <div class="note__btn"> <button class="btn btn-view">View Detail</button> </div> </div> --> </div> </div>检查 btn.click 事件的新事件侦听器...我正在通过获取添加到字符串文字的按钮值属性来确定要显示的注释...我正在使用该值来获取通过给 p 一个 id 并引用它来注意....我相信这会给你你正在寻找的东西
如何让模态窗口准确反映笔记应用中每个笔记的内容？
[英]How to make modal window accurately reflect contents of each note in a note-taking app?
如何基于v-for值在模态窗口（单击按钮）上获取所选数据？
[英]How can I get the selected data on my modal window(on button click) based on the v-for value?
当我到达最后一页时，我对服务器进行AJAX调用以从数据库中获取更多数据，而无需等待单击下一步按钮
[英]when i reached the last page, I make an AJAX call to the server for more data from my database without waiting to click my next button
为什么我在bootstrap模式中点击事件火灾时会得到多个
[英]Why I'm getting more than one on click event fire inside bootstrap modal
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.