+ 1

Pop up wont work

HTML: <!DOCTYPE html> <html> <head> <title> title work </title> </head> <body>  <button id="myBtn">Password Requirments</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Some text in the Modal..</p> </div> </div> </body> </html> CSS: /* popup backround */ .modal { display:none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; backround-color: rgb(0,0,0); backround-color: rgb(0,0,0,0.4); } /*Popup Content */ .modal-content { backround-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } /* Popup close button */ .close { color:#aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } JAVASCRIPT: // get the popup var btn = document.getElementById('myModal'); // button that opens the popup var btn = document.getElementById("myBtn"); // <span> to close popup var span = document.getElementsByClassName("close")[0]; // when the user clicks the buttion it opens the popup btn.click= function() { //problem is here and if i put a <script> in html i get a invisble token error modal.style.display= "block"; } ; // when user clicks on (x) it closes the popup span.onclick = function() { modal.style.display = "none"; } ; // when user clicks anywhere outside the popup it closes window.onclick = function(event) { if(event.target == modal) { modal.style.display="none"; } } ; My Problem: when i hit run i get this message, "Uncaught TypeError: Cannot set property 'click' of null Line:11" I can get rid of this problem by putting a <script></script> inside the html but that gets rid of the popup button and with the script in i get a token er

html css java

3rd Sep 2017, 5:37 PM

Ohmpe

4 Answers

+ 4

If you put your JavaSCRIPT (not 'Java', it's another language not related with front-side web ^^) into JS tab in code playground, you need to embed it in a function called by 'onload' event to be sure that DOM is ready to be accessed: window.addEventListener('load',function() { /* your code */ }); This can be shortened as: window.onload = function() { /* your code */ }; ... but it wasn't a good practice ;P Anyway, you could also use the better suited 'DOMContentLoaded' event of 'document' object, even if it's commonly fired just before the 'onload' one (but should make difference with lot of ressources linked: 'onload' is fired when all linked ressources are done, while 'DOMContentLoaded' is fired as soon as main document is loaded ;))... document.addEventListener('DOMContentLoaded',function() { /* your code */ }); ... for this last, you cannot use the same kind of shorthand writting than for 'onload' (the corresponding attribute 'onDOMContentLoaded' doesn't exist).

4th Sep 2017, 7:52 AM

visph

+ 7

Advice: you can share your code's link instead, it would be easier for both of us Also the assignment of the first btn variable is meaningless since you overwrite it just after. Finally a click input without jQuery works like that: btn.addEventListener('click', function(){ //... },false);

3rd Sep 2017, 5:48 PM

Dapper Mink