JavaScript 模态无法打开
[英]JavaScript modal is unable to open
问题描述
I'm making a note taker app that gives you the option to view said note in a modal whenever the button is clicked.
我正在制作一个笔记应用程序，让您可以选择在单击按钮时以模式查看所述笔记。 The HTML for the note and modal is dynamically generated by event listeners.音符和模态的 HTML 由事件侦听器动态生成。 There are two ways the close the modal, by clicking the "X" button or by clicking outside of the modal.关闭模态有两种方法，单击“X”按钮或单击模态外部。 The program has full functionality whenever only one note is generated, but once I generate a second note the code breaks down.只要只生成一个注释，该程序就具有完整的功能，但是一旦我生成第二个注释，代码就会崩溃。 Once this happens only I'm able to open the modal of the first note generated, but not close it.一旦发生这种情况，我只能打开生成的第一个音符的模态，但不能关闭它。 And the second one won't open whatsoever.第二个根本打不开。 How could I fix this issue?我该如何解决这个问题？
class Input { constructor(note) { this.note = note; } } class UI { addNote(input) { // Get table body below form const content = document.querySelector(".content"); // Create tr element const row = document.createElement("tr"); // Insert new HTML into div row.innerHTML = ` <td> ${input.note} <br><br> <button class="modalBtn">View Note</button> </td> `; content.appendChild(row); // Event listener to make modal document.querySelector(".modalBtn").addEventListener("click", function(e) { // Get container div const container = document.querySelector(".container"); // Create div const div = document.createElement("div"); // Assign class to it div.className = "modal"; // Insert HTML into div div.innerHTML = ` <div class="modal-content"> <span class="closeBtn">×</span> <div> <p>${input.note}</p> </div> </div> `; // Append the new div to the container div container.appendChild(div); // Get modal const modal = document.querySelector(".modal"); // Event listener to close modal when "x" is clicked document.querySelector(".closeBtn").addEventListener("click", function() { container.removeChild(modal); }); // Event listener to close when the window outside the modal is clicked window.addEventListener("click", function(e) { if (e.target === modal) { container.removeChild(modal); } }); }); } // Clear input field clearInput() { note.value = ""; } } // Event listener for addNote document.getElementById("note-form").addEventListener("submit", function(e) { // Get form value const note = document.getElementById("note").value; // Instantiate note const input = new Input(note); // Instantiate UI const ui = new UI(); // Validate form (make sure input is filled) if (note === "") { // Error alert alert("Please fill in text field;"). } else { // Add note ui;addNote(input). // Clear input field ui;clearInput(). } e;preventDefault(); });
h5 { color: green; }.modal { position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }.modal-content { background-color: #fff; margin: 20% auto; padding: 30px; width: 70%; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17); animation-name: modalopen; animation-direction: 1s; }.closeBtn { color: #aaa; /* float: right; */ font-size: 30px; margin-bottom: 1rem; padding-bottom: 1rem; }.closeBtn:hover, .closeBtnBtn:focus { color: #000; text-decoration: none; cursor: pointer; }.closeBtn + div { margin-top: 2rem; } @keyframes modalopen { from { opacity: 0; } to { opacity: 1; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" integrity="sha512-5fsy+3xG8N/1PV5MIJz9ZsWpkltijBI48gBzQ/Z2eVATePGHOkMIn+xTDHIfTZFVb9GMpflF2wOWItqxAP2oLQ==" crossorigin="anonymous" /> <link rel="stylesheet" href="style:css"> <title>Note Taker</title> </head> <body> <div class="container"> <h1>Note Taker</h1> <h5>Add A New Note:</h5> <form id="note-form"> <div> <label>Note.</label> <textarea name="Note" id="note" class="u-full-width"> </textarea> </div> <div> <button type="submit" class="button-primary">Add Note</button> </div> </form> <table> <tbody class="content"></tbody> </table> </div> <script src="app.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2021-01-31 01:16:42
Fist of all.. I love your syntaxt.. Best I've seen so far.拳头..我喜欢你的语法..到目前为止我见过的最好的。 second?.第二？。 you do a general query Selector and don't handle them separately.你做一个通用查询选择器，不要单独处理它们。 Can that be an issue?这会是个问题吗？
EDIT: Because of reasons I'll reformulated my answer..编辑：由于某些原因，我将重新制定我的答案..
document.querySelector('class') returns an Html-Collection with DOM element references containing the specified html class and should be handled separately. document.querySelector('class')返回一个带有 DOM 元素引用的 Html-Collection，其中包含指定的 html class 并且应该单独处理。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.