We Keep Coding

How to handle onclick null error for HTML added via JS?

I have markup that is added via JS that has an onclick action (it's a close button).
Essentially:
User clicks play button
A modal appears with the video and a close modal button (both which are added via JS)
As my close button (.modal--close) isn't on the page on load, I'm getting a Cannot set properties of null (setting 'onclick') (I think).
My thoughts are that the because the DOMContentLoaded event was already fired at this point, it is causing the error? But unsure how to resolve it.
Demo
if (document.readyState === "complete") {
ready();
} else {
document.addEventListener("DOMContentLoaded", ready);
}
function ready() {
if(document.querySelector(".open-video")){
document.querySelector(".open-video").onclick = function (e) {
e.preventDefault();
var modal = document.querySelector(".videoModal");
// get data
var triggerURL = this.getAttribute("href");
var triggerID = this.getAttribute("data-modal");
// update modal attributes with trigger data
modal.setAttribute("data-video", triggerURL);
modal.setAttribute("id", triggerID);
var modalID = '#'+ triggerID;
modal.classList.add("modal--open");
var html = '<div class="modal__wrapper"><iframe width="640" height="360" src="'+ triggerURL + '?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></div><div class="modal__overlay"></div>';
modal.innerHTML = html;
return false;
}
}
// close modal
document.querySelector(".modal--close").onclick = function (e) {
e.preventDefault();
console.log("test");
}
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
overflow: hidden;
display: none;
padding: 70px 80px;
}
.modal--close {
position: fixed;
right: 50%;
top: 32px;
width: 16px;
height: 16px;
z-index: 999999;
pointer-events: auto !important;
}
.modal--close:hover:before, .modal--close:hover:after {
background-color: #F15A40;
}
.modal--close:before, .modal--close:after {
content: "";
position: absolute;
left: 15px;
height: 16px;
width: 2px;
background-color: #FFFFFF;
}
.modal--close:before {
transform: rotate(45deg);
}
.modal--close:after {
transform: rotate(-45deg);
}
.modal--open {
display: block;
}
.modal .modal__wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
max-height: 100%;
overflow: hidden;
z-index: 150;
}
.modal .modal__wrapper:before {
content: "";
display: block;
padding-top: 56.25%;
}
.modal .modal__wrapper iframe, .modal .modal__wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
}
.modal .modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
}
<a class="button--play open-video" data-modal="video--1" href="https://www.youtube.com/embed/NpEaa2P7qZI">Click me</a>
<div class="videoModal modal modal__post--modal">
<a id="modal_close" class="modal__close"></a>
<div class="modal__wrapper"></div>
<div class="modal__overlay"></div>
</div>
Edit
Have also tried moving the event listener after the markup has been added:
if (document.readyState === "complete") {
ready();
} else {
document.addEventListener("DOMContentLoaded", ready);
}
function ready() {
let video_btn = document.querySelector(".open-video");
let close_btn = document.querySelector(".modal--close");
let modal = document.querySelector(".videoModal");
if(video_btn){
video_btn.addEventListener("click", function (e) {
e.preventDefault();
// get data
var triggerURL = this.getAttribute("href");
var triggerID = this.getAttribute("data-modal");
// update modal attributes with trigger data
modal.setAttribute("data-video", triggerURL);
modal.setAttribute("id", triggerID);
var modalID = '#'+ triggerID;
modal.classList.add("modal--open");
var html = '<div class="modal__wrapper"><iframe width="640" height="360" src="'+ triggerURL + '?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></div><div class="modal__overlay"></div>';
modal.innerHTML = html;
return false;
close_btn.addEventListener("click", function (e) {
e.preventDefault();
console.log("test");
});
});
}
}
With the above, the modal launches fine, but when I click .modal--close, nothing happens (no console.log and no console errors).
Edit 2
Have also tried moving the second event listener above the code snippet that adds the markup:
var html = '<div class="modal__wrapper"><iframe width="640" height="360" src="'+ triggerURL + '?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></div><div class="modal__overlay"></div>';
close_btn.addEventListener("click", function (e) {
e.preventDefault();
console.log("test");
});
modal.innerHTML = html;
return false;
With the above however, when I click the .open-video button, I get the error Cannot read properties of null (reading 'addEventListener')

if (document.readyState === "complete") {
ready();
} else {
document.addEventListener("DOMContentLoaded", ready);
}
function ready() {
var modal = document.querySelector(".videoModal");
var triggerURL;
if(document.querySelector(".open-video")){
document.querySelector(".open-video").onclick = function (e) {
e.preventDefault();
// get data
triggerURL = this.getAttribute("href");
var triggerID = this.getAttribute("data-modal");
// update modal attributes with trigger data
modal.setAttribute("data-video", triggerURL);
modal.setAttribute("id", triggerID);
var modalID = '#'+ triggerID;
modal.classList.add("modal--open");
return false;
}
}
// close modal
var html = '<div class="modal__wrapper"><iframe width="640" height="360" src="'+ triggerURL + '?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe></div><div class="modal__overlay"></div>';
modal.innerHTML = html;
if(document.querySelector(".modal--close")){
document.querySelector(".modal--close").onclick = function (e) {
e.preventDefault();
console.log("test");
}
}
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
overflow: hidden;
display: none;
padding: 70px 80px;
}
.modal--close {
position: fixed;
right: 50%;
top: 32px;
width: 16px;
height: 16px;
z-index: 999999;
pointer-events: auto !important;
}
.modal--close:hover:before, .modal--close:hover:after {
background-color: #F15A40;
}
.modal--close:before, .modal--close:after {
content: "";
position: absolute;
left: 15px;
height: 16px;
width: 2px;
background-color: #FFFFFF;
}
.modal--close:before {
transform: rotate(45deg);
}
.modal--close:after {
transform: rotate(-45deg);
}
.modal--open {
display: block;
}
.modal .modal__wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
max-height: 100%;
overflow: hidden;
z-index: 150;
}
.modal .modal__wrapper:before {
content: "";
display: block;
padding-top: 56.25%;
}
.modal .modal__wrapper iframe, .modal .modal__wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
}
.modal .modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
}
<a class="button--play open-video" data-modal="video--1" href="https://www.youtube.com/embed/NpEaa2P7qZI">Click me</a>
<div class="videoModal modal modal__post--modal">
<a id="modal_close" class="modal__close"></a>
<div class="modal__wrapper"></div>
<div class="modal__overlay"></div>
</div>
Just wrap the code snippet that fires the issues with below function.
if(document.querySelector(".modal--close")){
}

Trying to access getElementById twice, but not working... but I've read I can, so something else must be wrong

I'm not well versed in JavaScript, so I'm probably not explaining this right, but I have a jsfiddle. I have a script that pops up a modal with another page in it. If I'm using one link all is well and everything works. It's perfect for what I need.
There are times when I want to add a second link with the same ID so that it pops up with the same functionality, same page and everything, but when I do that only the first link on the page works and the second link fails.
If I remove the first link, the second one works fine.
I would appreciate any thoughts on how to fix this so they both work.
HTML:
<p>
<a href="" id="link"
>Add your thoughts (this works, but the second link doesn't unless this
one is removed).</a
>
</p>
View or Add Comments<br />
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>
<p>(Click background to exit popup)</p>
JavaScript:
document.getElementById("link").onclick = function (e) {
e.preventDefault();
document.getElementById("popupiframe").src = "http://www.blankwebsite.com/"
document.getElementById("popup").style.display = "block";
document.getElementById("popupiframe").src =
"http://www.blankwebsite.com/";
document.getElementById("popupdarkbg").onclick = function () {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
CSS:
#comments {
width: 100%;
text-align: center;
margin: 15px 0 15px 0;
}
#popup {
display: none;
position: fixed;
top: 12%;
left: 15%;
width: 70%;
height: 80%;
background-color: white;
z-index: 10;
}
#popup iframe {
width: 100%;
height: 100%;
border: 0;
}
#popupdarkbg {
position: fixed;
z-index: 5;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.75);
display: none;
}

Dropdown mobile menu sliding in from top by pressing the Icon

I want my mobile dropdown menu to slide in from top when the user clicks the "header-downbar-menu" icon and slide out to the top when the user clicks it again. For now the button can only show the menu but I don't know how to properly write JS for this part...
var DropdownMenuDown = false;
function OpenDropdownMenu() {
if (DropdownMenuDown == false) {
document.getElementById("header-dropdown-menu").style.top = "0px";
}
}
.header-dropdown {
width: 100%;
position: relative;
}
.header-dropdown-menu {
width: 100%;
height: 80vh;
background-color: white;
position: absolute;
top: -80vh;
}
<div class="header-downbar-menu" onclick="OpenDropdownMenu()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="header-dropdown">
<div id="header-dropdown-menu" class="header-dropdown-menu">
</div>
</div>
I can't make the var "DropdownMenuDown" work

I'd recommend you using toggle for this.
Look here:
function showMenu() {
var topmenu = document.querySelector('.topmenu');
topmenu.classList.toggle('show-me');
}
body {
margin: 0;
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #AEAEAE;
}
.topmenu {
position: absolute;
height: 60px;
top: -60px;
width: 100%;
background-color: red;
z-index: 99;
}
.show-me {
top: 0 !important;
}
button {
position: absolute;
top: 60px;
left: 0;
}
<div id="bg">
<div class="topmenu">
</div>
<button onclick="showMenu()">Menu pls!</button>
</div>

i just have read your question. i think you are not aware of the selector of document. in your case, the code should be like this.
var DropdownMenuDown = false;
function OpenDropdownMenu() {
if (DropdownMenuDown == false) {
document.getElementByClassName("header-dropdown-menu").style.top = "0px";
}
}
"header-dropdown-menu "is not id, but classname!

multiple pop up div's in the same page

In one of my projects, I have requirement of multiple pop up div's on the same page. That means when user clicks on a link, some content should open in a pop up. There will be many such links with their own pop ups. With little knowledge of javascript, I have tried to write a javascript for it but it works only for one pop up. When I click on second, third... links, only first pop up opens rather than opening second, third... pop ups. Here is my code. Please tell the modifications to it.
<!DOCTYPE html>
<html >
<head>
<script>
window.document.onkeydown = function (e)
{
if (!e)
{
e = event;
}
if (e.keyCode == 27)
{
lightbox_close();
}
}
function lightbox_open()
{
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close()
{
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<style>
#fade
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light
{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
</head>
<body>
Open 1
<div id="light">div 1</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 2
<div id="light">div 2</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 3
<div id="light">div 3</div>
<div id="fade" onClick="lightbox_close();"></div>
</body>
</html>

Here's a way to achieve what you want. I'm sure it can be improved, but it's up to you then.
First, IDs should be unique across the page. If you want to group elements, give them a shared class instead.
With the changes, your HTML would look like this:
Open 1
<div class="light">div 1</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 2
<div class="light">div 2</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 3
<div class="light">div 3</div>
<div class="fade" onClick="lightbox_close()"></div>
Your CSS:
html, body {
width: 100%;
height: 100%;
}
.fade {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.light {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
And your Javascript:
window.document.onkeydown = function (e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
// Note that the function is receiving the clicked element reference.
function lightbox_open(el) {
window.scrollTo(0,0);
// All the anchors that have a class lightbox.
var anchors = document.querySelectorAll('a.lightbox');
// All the elements with class light.
var light = document.querySelectorAll('.light');
// All the elements with class fade.
var fade = document.querySelectorAll('.fade');
// Iterate over the anchors elements.
for (var i = 0; i < anchors.length; i++) {
// If the anchor matches the clicked one.
if (anchors[i] == el) {
// Look for the light and fade with the same index
// and display them.
light[i].style.display = 'block';
fade[i].style.display = 'block';
}
}
}
function lightbox_close() {
// All the elements with class light or fade.
var els = document.querySelectorAll('.light, .fade');
// Loop through the list.
for (var i = 0; i < els.length; i++) {
// Hide them.
els[i].style.display = 'none';
}
}
Demo

JQuery replaced link not working under IE 8-10

I made a popup and I have a problem with IE 8-10 (under IE11 no problem). My code replace an image to linked image. Link is working under Firefox, Chrome and IE11, but not working under other IE versions. This is a popop window by default. Here is my code:
<div id="fadeinboxrevol">
<div id="koppbase">
<p class="kalapacs"><img src="./images/original.png" alt="Click here" /></p>
</div>
</div>
<script type="text/javascript">
var tto = jQuery.noConflict();
function get_path() {
var piclist =['./images/1.png','./images/2.png','./images/3.png','./images/4.png'];
var linklist =['1.html','2.html','3.html','4.html'];
var random = Math.floor(Math.random()*piclist.length);
var picpath = piclist[random];
var linkpath = linklist[random];
var pack = [picpath, linkpath];
return pack;
}
tto(".kalapacs").click(function () {
var mypack = get_path();
var mypic = mypack[0];
var mypath = mypack[1];
var content1 = '<p class="torp"><img class="torve" src="'+mypic+'" alt="Don't wait" /><a class="tortext" href="'+mypath+'"></a></p>';
tto("#koppbase").html(content1);
});
</script>
And here is my CSS:
#fadeinboxrevol {
position: absolute;
width: auto;
left: 301px;
top: 262.5px;
visibility: visible;
border: none;
background-color: ;
padding: 0 px;
z-index: 999;
text-align: left;
}
.kalapacs:hover {
cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur), progress !important;
}
.torp {
position: relative;
}
.tortext {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: block;
z-index: 9999;
}
#revolclosebutton {
margin-top: -40px;
right: 20px;
position: absolute;
width: 16px;
z-index: 999;
}
Here is an example in jsfiddle, I use jQuery 1.11 version for better compatibility:
http://jsfiddle.net/mykee/uDCKL/
I tried this line too:
tto("#koppbase").replaceWith(content1);
but not helped. :-(
What's my problem?

The problem is this line of code: var content1 = '<p class="torp"><img class="torve" src="'+mypic+'" alt="Don't wait" /><a class="tortext" href="'+mypath+'"></a></p>';
Change it to: var content1 = '<p class="torp"><a class="tortext" href="'+mypath+'"><img class="torve" src="'+mypic+'" alt="Don't wait" /></a></p>';
When you look at older IE the a is empty after the img tag, so its hard to click it! (Hover down the 2nd image.)
Demo: http://jsfiddle.net/uDCKL/7/

I found a solution! Changed content1 line to this:
var content = '<p class="torp"><a class="tortext" href="'+mypath+'"><img class="torve" src="'+mypic+'" alt="Dont wait" /></a></p>';
And CSS replaced with this and working:
.kalapacs:hover {
cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur), progress !important;
}
.torp {
position: relative;
}
.tortext {
display: block;
}
#revolclosebutton {
margin-top: -40px;
right: 20px;
position: absolute;
width: 16px;
z-index: 99999;
}