Can anyone show me why my modals aren't opening

Question

To see the modal button, fill out the input fields and select a day to output to

I grabbed the modal and the "todo" functionality from w3schools.com and changed some of the ids and classes. I've been looking through everything for a while and I can't seem to find the issue. I just need another pair of eyes on it.

 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

It is because you said btn.onclick to show the modal but you never defined btn. It should be submitBtn.onclick .

I have a jsfiddle link because it doesn't work on a snippet properly: https://jsfiddle.net/nukeboy212/7yj0rhsL/8/

Answer 2

The solution is that these code must be in event listener of submit button. You want to select the Open Modal button only after you clicked the submit button and add the onClick function immediately after:

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