谁能告诉我为什么我的模态没有打开

Question

要查看模式按钮，请填写输入字段并选择要输出到的日期

我从 w3schools.com 获取了模态和“todo”功能并更改了一些 ID 和类。 我已经浏览了一段时间，但似乎无法找到问题所在。 我只需要另一双眼睛看着它。

 var submitBtn = document.querySelector("#submitBtn"); submitBtn.addEventListener("click", function(){ event.preventDefault(); var boxSelect = document.querySelector("#boxSelect"); document.querySelector(`#b${boxSelect.value}NameOutput`).innerHTML = "<p>"+document.querySelector("#name").value+"</p>"; document.querySelector(`#b${boxSelect.value}UserOutput`).innerHTML = "<p>"+document.querySelector("#user").value+"</p>"; document.querySelector(`#b${boxSelect.value}LinkOutput`).innerHTML = "<p><a target='_blank' href='"+document.querySelector('#link').value+"'>Click Here for Recipe</a></p>"; document.querySelector(`#myBtn${boxSelect.value}`).style.display = "block"; }); // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.querySelector(`#myBtn${boxSelect.value}`); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } // Create a "close" button and append it to each list item var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) { var span = document.createElement("SPAN"); var txt = document.createTextNode("\×"); span.className = "close"; span.appendChild(txt); myNodelist[i].appendChild(span); } // Click on a close button to hide the current list item var close = document.getElementsByClassName("close"); var i; for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } } // Add a "checked" symbol when clicking on a list item var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if (ev.target.tagName === 'LI') { ev.target.classList.toggle('checked'); } }, false); // Create a new list item when clicking on the "Add" button function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something!"); } else { document.getElementById("myUL").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\×"); span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } } }

 .square{ border: 1px solid black; width: 15rem; height: 15rem; float: left; margin:10px; } #formContainer { position: relative; float: left; } .boxTitle { text-align: center; margin-top: 1em; } .boxOutputContainer { text-align: center; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .myBtn { display: none; } /* Remove margins and padding from the list */ ul { margin: 0; padding: 0; text-align: center; } /* Style the list items */ ul li { cursor: pointer; position: relative; padding: 12px 8px 12px 40px; background: #eee; font-size: 18px; transition: 0.2s; /* make the list items unselectable */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Set all odd list items to a different color (zebra-stripes) */ ul li:nth-child(odd) { background: #f9f9f9; } /* Darker background-color on hover */ ul li:hover { background: #ddd; } /* When clicked on, add a background color and strike out text */ ul li.checked { background: #888; color: #fff; text-decoration: line-through; } /* Add a "checked" mark when clicked on */ ul li.checked::before { content: ''; position: absolute; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; top: 10px; left: 16px; transform: rotate(45deg); height: 15px; width: 7px; } /* Style the close button */ .close { position: absolute; right: 0; top: 0; padding: 12px 16px 12px 16px; } .close:hover { background-color: #f44336; color: white; } /* Style the header */ .header { background-color: black; padding: 30px 40px; color: white; text-align: center; } /* Clear floats after the header */ .header:after { content: ""; display: table; clear: both; } /* Style the input */ #myInput { margin: 0; border: none; border-radius: 0; width: 75%; padding: 10px; float: left; font-size: 16px; } /* Style the "Add" button */ .addBtn { padding: 10px; width: 25%; background: #d9d9d9; color: #555; float: left; text-align: center; font-size: 16px; cursor: pointer; transition: 0.3s; border-radius: 0; } .addBtn:hover { background-color: #bbb; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="row col-sm-12"> <div class="square"> <h1 class="boxTitle">Sunday</h1> <div class="boxOutputContainer"> <div class="outputItem" id="b1NameOutput"></div> <div class="outputItem" id="b1UserOutput"></div> <div class="outputItem" id="b1LinkOutput"></div> <button class="myBtn" id="myBtn1">Open Modal</button> </div> </div> <div class="square"> <h1 class="boxTitle">Monday</h1> <div class="boxOutputContainer"> <div class="outputItem" id="b2NameOutput"></div> <div class="outputItem" id="b2UserOutput"></div> <div class="outputItem" id="b2LinkOutput"></div> <button class="myBtn" id="myBtn2">Open Modal</button> </div> </div> <div class="square"> <h1 class="boxTitle">Tuesday</h1> <div class="boxOutputContainer"> <div class="outputItem" id="b3NameOutput"></div> <div class="outputItem" id="b3UserOutput"></div> <div class="outputItem" id="b3LinkOutput"></div> <button class="myBtn" id="myBtn3">Open Modal</button> </div> </div> <div class="square"> <h1 class="boxTitle">Wednesday</h1> <div class="boxOutputContainer"> <div class="outputItem" id="b4NameOutput"></div> <div class="outputItem" id="b4UserOutput"></div> <div class="outputItem" id="b4LinkOutput"></div> <button class="myBtn" id="myBtn4">Open Modal</button> </div> </div> </div> <div class="row col-lg-12"> <div class="square"> <h1 class="boxTitle">Thursday</h1> <div class="boxOutputContainer"> <div class="outputItem" id="b5NameOutput"></div> <div class="outputItem" id="b5UserOutput"></div> <div class="outputItem" id="b5LinkOutput"></div> <button class="myBtn" id="myBtn5">Open Modal</button> </div> </div> <div class="square"> <h1 class="boxTitle">Friday</h1> <div class="boxOutputContainer"> <div class="outputItem" id="b6NameOutput"></div> <div class="outputItem" id="b6UserOutput"></div> <div class="outputItem" id="b6LinkOutput"></div> <button class="myBtn" id="myBtn6">Open Modal</button> </div> </div> <div class="square"> <h1 class="boxTitle">Saturday</h1> <div class="boxOutputContainer"> <div class="outputItem" id="b7NameOutput"></div> <div class="outputItem" id="b7UserOutput"></div> <div class="outputItem" id="b7LinkOutput"></div> <button class="myBtn" id="myBtn7">Open Modal</button> </div> </div> </div> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <div id="myDIV" class="header"> <h2>My To Do List</h2> <input type="text" id="myInput" placeholder="Title..."> <span onclick="newElement()" class="addBtn">Add</span> </div> <ul id="myUL"></ul> </div> </div> <div class="row"> <div id="formContainer"> <form> <label for="name">Recipe name:</label> <input required type="text" id="name"> <label for="user">Who's making it?</label> <input required type="text" id="user"> <label for="link">Recipe Link</label> <input type="text" id="link"> <label for="boxSelect">Which day?</label> <select id="boxSelect"> <option value="1">Sunday</option> <option value="2">Monday</option> <option value="3">Tuesday</option> <option value="4">Wednesday</option> <option value="5">Thursday</option> <option value="6">Friday</option> <option value="7">Saturday</option> </select> <input type="submit" id="submitBtn"> </form> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>

Answer 1

这是因为您说btn.onclick显示模态但您从未定义btn. 它应该是submitBtn.onclick 。

我有一个 jsfiddle 链接，因为它不能正确处理片段： https ://jsfiddle.net/nukeboy212/7yj0rhsL/8/

Answer 2

解决方案是这些代码必须在提交按钮的事件侦听器中。 您只想在单击提交按钮后选择 Open Modal 按钮并在之后立即添加 onClick 函数：

  var boxSelect = document.querySelector("#boxSelect");
  var btn = document.querySelector(`#myBtn${boxSelect.value}`);
  btn.onclick = function () {
      modal.style.display = "block";
  };