Double for loop with addEventListener not working - for-loop

Question

So the difficulty I have, is that I cannot get an addEventListener for each day in my calender.
I want to add an event listener, so that when the user clicks on it, it displays the plans they have for that day.
Whenever I try to run it, it sometimes gives me an error, and then other times nothing happens. I am aware this has something to do with closures, but I am relatively new to javascript.
I tried querySelectorAll, but that did not work either
window.addEventListener("load", function() {
/*****************************
1. When confirm button clicked, gather information and put it in a data base
2. Reset the planifier
3. Put info in the corresponding date
4. When hovering over a date with a plan, show the plans
5. When the next/previous month button clicked, change the month
7. Reset the plan
6. Update the month UI
7. Add correspond dates and remove last plans from the UI
*****************************/
// UI CONTROLLER
var UIController = (function() {
// Sets all inputs
var DOMStrings = {
calenderMonth: ".calender-month",
confirmButton: ".confirm",
inputDate: ".ask-date",
inputItem1: ".ask-item1",
inputItem2: ".ask-item2",
inputItem3: ".ask-item3",
inputItem4: ".ask-item4",
warningText: ".warning"
}
return {
calenderDefault: function() {
//
var now, currentDay, weekDays, currentWeekDay, calenderRow, months, currentMonth, currentYear, firstDayThisMonth, prevMonth, lastDayOfMonth, lastWeekDayLastMonth;
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
now = new Date();
currentYear = now.getFullYear(); //2020
currentDay = now.getDate();
currentWeekDay = weekDays[now.getDay()];
currentMonth = months[now.getMonth()];
firstDayThisMonth = new Date(now.getFullYear(), now.getMonth(), 1).getDay();
prevMonth = new Date(now.getFullYear(), now.getMonth(), 0);
lastWeekDayLastMonth = prevMonth.getDay();
lastDayOfMonth = (new Date(now.getFullYear(), now.getMonth() + 1, 0)).getDate();
// Clears out boxes in the first row that don't belong to the current month as well as adding the correct numbers to the date
function replace(a) {
var i;
for (i = 0; i < 7; i++) {
if (counter > lastDayOfMonth) {
counter++;
document.getElementById(a + "-" + weekDays[i]).textContent = "";
document.getElementById(a + "-" + weekDays[i]).style.borderColor = "#ff9999";
} else if (counter <= lastDayOfMonth) {
document.getElementById(a + "-" + weekDays[i]).textContent = counter;
counter++;
}
}
}
for (var a = 1; a <= 6; a++) {
var counter;
if (a === 1) {
counter = 1;
for (i = lastWeekDayLastMonth; i >= 0; i--) {
document.getElementById(a + "-" + weekDays[i]).textContent = "";
document.getElementById(a + "-" + weekDays[i]).style.borderColor = "#ff9999";
}
for (i = lastWeekDayLastMonth + 1; i < 7; i++) {
document.getElementById(a + "-" + weekDays[i]).textContent = counter;
counter++;
}
} else if (a === 2) {
replace(a);
} else if (a === 3) {
replace(a);
} else if (a === 4) {
replace(a);
} else if (a === 5) {
replace(a);
} else if (a === 6) {
replace(a);
}
}
// This sets the title of the calender AKA the h2
document.querySelector(DOMStrings.calenderMonth).textContent = currentMonth + ", " + currentYear;
// This makes the border of the current day black (or another color if I change it)
if (currentDay < (7 - firstDayThisMonth)) {
calenderRow = 1;
} else if (currentDay < (14 - firstDayThisMonth)) {
calenderRow = 2;
} else if (currentDay < (21 - firstDayThisMonth)) {
calenderRow = 3;
} else if (currentDay < (28 - firstDayThisMonth)) {
calenderRow = 4;
} else if (currentDay < (35 - firstDayThisMonth)) {
calenderRow = 5;
} else {
calenderRow = 6;
}
document.getElementById(calenderRow + "-" + currentWeekDay).style.borderColor = "black";
},
resetValues: function() {
//reset values
document.querySelector(DOMStrings.inputDate).value = "";
document.querySelector(DOMStrings.inputItem1).value = "";
document.querySelector(DOMStrings.inputItem2).value = "";
document.querySelector(DOMStrings.inputItem3).value = "";
document.querySelector(DOMStrings.inputItem4).value = "";
//clear the warning
document.querySelector(DOMStrings.warningText).textContent = "";
},
getValues: function() {
return {
date: document.querySelector(DOMStrings.inputDate).value,
item1: document.querySelector(DOMStrings.inputItem1).value,
item2: document.querySelector(DOMStrings.inputItem2).value,
item3: document.querySelector(DOMStrings.inputItem3).value,
item4: document.querySelector(DOMStrings.inputItem4).value,
}
},
getDOMStrings: function() {
return DOMStrings;
}
};
})();
// DATA CONTROLLER
var dataController = (function() {
return {
data: {
plans: [],
}
};
})();
// APP CONTROLLER
var appController = (function(UICtrl, DATACtrl) {
var DOM;
var setUpEventListeners = function() {
var weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
DOM = UICtrl.getDOMStrings();
// If confirm button clicked, do this
document.querySelector(DOM.confirmButton).addEventListener("click", planify);
document.getElementById("1-Monday").addEventListener("click", showPlans);
// STACK OVERFLOW USERS HERE
for (var a = 1; a < 7; a++) {
for (var i = 0; i < 7; i++) {
document.getElementById(a + "-" + weekDays[i]).addEventListener("click", showPlans);
}
}
};
var checkInput = function(input) {
if (input.date === "") {
document.querySelector(DOM.warningText).textContent = "Please put a date";
} else if (input.item1 === "" && input.item2 === "" && input.item3 === "" && input.item4 === "") {
document.querySelector(DOM.warningText).textContent = "Please put atleast one, ONE ITEM. thank you :)";
} else if (input.item1 == false) {
document.querySelector(DOM.warningText).textContent = "You couldn't be normal and just put it in the first slot ey?";
} else {
// store values in data
DATACtrl.data.plans.push(input);
console.log(DATACtrl.data.plans);
// reset the values
UICtrl.resetValues();
}
};
var planify = function(event) {
var input;
//get values
input = UICtrl.getValues();
// check if values are in the input
checkInput(input);
//put values on UI
// 1. put icon to show it is there
// 2. when clicked, it shows the box with the values
};
var showPlans = function() {
DATACtrl.data.plans.push("asdadasda");
console.log(DATACtrl.data.plans);
}
return {
init: function() {
// 1. Set calender month and year to current time
UIController.calenderDefault();
// 2. Set up event listeners
setUpEventListeners();
}
};
})(UIController, dataController);
appController.init();
});
* {
font-family: "Helvetica", "arial";
}
body {
margin: 0;
background-color: #1f1f60;
}
div {
margin: 0;
}
/* Top panel with mountains image*/
.panel {
background: url(mountains.jpg);
box-shadow: 0px 0px 10px 1px black;
height: 400px;
width: 100%;
background-position: 10% 40%;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: center;
margin: 10
}
.boxes {
display: inline-block;
position: relative;
top: 100px;
}
.container {
text-align: center;
}
/* Left box in .panel */
.left-box {
box-shadow: 0px 0px 10px 1px black;
display: inline-block;
background-color: white;
width: auto;
padding: 26px 25px 26px 25px;
border-radius: 15px;
vertical-align: bottom;
margin: 0 5px 0 5px;
}
.statisticsTitle {
padding: 10px 20px 10px 20px;
font-size: 30px;
}
.information-plans {
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
padding: 15px 10px 15px 10px;
border: 1px solid;
border-radius: 10px;
color: white;
}
.totalPlans {
padding: 5px;
}
.totalPlans-title {
display: inline-block;
}
.totalPlans-output {
display: inline-block;
}
.completedPlans {
padding: 5px;
}
.completedPlans-title {
display: inline-block;
}
.completedPlans-output {
display: inline-block;
}
/* Right box in .panel */
.right-box {
box-shadow: 0px 0px 10px 1px black;
display: inline-block;
background: white;
width: auto;
padding: 25px;
border-radius: 15px;
margin: 0 5px 0 5px;
}
.information-all {
z-index: 5;
}
.planifierTitle {
padding: 10px 20px 10px 20px;
font-size: 30px;
}
.inputFields {}
.ask {
color: white;
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
display: inline-block;
padding: 15px 10px 15px 10px;
border: 1px solid;
border-radius: 10px;
vertical-align: top;
}
input {
padding: 3px 2px 3px 2px;
display: block;
width: 125px;
border: 1px solid white;
border-radius: 7px;
height: 20px;
margin-top: 10px;
}
.btn-confirm {
display: inline-block;
border: 1px solid #00ff99;
border-radius: 11.5px;
}
.confirm {
color: white;
height: 88px;
width: 153px;
border: 1px solid #00ff99;
border-radius: 10px;
font-size: 25px;
background-color: #00ff99;
}
button:hover {
cursor: pointer;
}
.warning {
position: absolute;
color: red;
font-size: 14px;
}
.planPresenter {
position: relative;
display: inline-block;
vertical-align: center;
box-shadow: 0px 0px 10px 1px black;
padding: 0 0 50px 0;
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
top: -30px;
width: 1010px;
height: auto;
text-align: center;
border: 1px solid #ff3333;
border-radius: 10px;
margin: 10px;
z-index: -1;
}
.calender-box {
display: inline-block;
margin: 30px 20px 20px 20px;
}
.calender-row {
margin: 0;
padding: ;
}
.calender-day {
vertical-align: top;
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid white;
background: white;
margin: 2px 0 2px 0;
padding: 8px;
border-radius: 2px;
}
.calender-week {
height: 20px;
text-align: center;
vertical-align: center;
}
.pastMonth {
position: absolute;
top: 440px;
left: 10px;
display: inline-block;
background: rgba(255, 255, 255, 0);
border: 0px;
}
.nextMonth {
position: absolute;
display: inline-block;
background-color: rgba(255, 255, 255, 0);
border: 0px;
top: 440px;
right: 10px;
}
.current-day {
background: #ff4d4d;
}
.planList-box {
width: 400px;
margin: 10px;
vertical-align: top;
border: 0px;
border-radius: 10px;
background: white;
display: inline-block;
position: relative;
top: -70px;
padding: 20px;
padding-top: 60px;
z-index: -1;
height: 904.31px;
box-shadow: 0px 0px 10px 1px black;
}
.planList-title {}
.planList-items {}
.planList-item {
border: 0px solid white;
border-radius: 4px;
text-align: left;
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
padding: 5px 10px 5px 10px;
margin: 10px;
max-width: 100%;
}
.planList-box::-webkit-scrollbar {
width: 10px;
margin-right: 10px;
}
.planList-box::-webkit-scrollbar-track {
margin: 20px 10px 20px 0px;
padding: 10px;
}
.planList-box::-webkit-scrollbar-thumb {
background: #1f1f60;
border: 0px;
border-radius: 5px;
width: 12px;
}
.planList-box::-webkit-scrollbar-thumb:hover {
background: #13133a;
}
<!doctype html>
<html lang="en">
<head>
<title>Daily Planning Tool</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="container">
<div class="panel">
<div class="boxes">
<div class="left-box">
<div class="information-all">
<div class="statisticsTitle">Statistics</div>
<div class="information-plans">
<div class="totalPlans">
<div class="totalPlans-output">%12%</div>
<div class="totalPlans-title">total plans</div>
</div>
<div class="completedPlans">
<div class="completedPlans-output">%22%</div>
<div class="completedPlans-title">completed plans</div>
</div>
</div>
</div>
</div>
<div class="right-box">
<div class="information-all">
<div class="planifierTitle">Planifier</div>
<div class="inputFields">
<div class="ask">Select Date<input class="ask-date" type="date"></div>
<div class="ask">Item 1<input class="ask-item1" type="text" placeholder="e.g. Math"></div>
<div class="ask">Item 2<input class="ask-item2" type="text" placeholder="e.g. Science"></div>
<div class="ask">Item 3<input class="ask-item3" type="text" placeholder="e.g. English"></div>
<div class="ask">Item 4<input class="ask-item4" type="text" placeholder="e.g. Art"></div>
<div class="btn-confirm"><button class="confirm">confirm</button></div>
<div class="warning"></div>
</div>
</div>
</div>
</div>
</div>
<div class="planPresenter">
<button class="pastMonth"><i class="fa fa-chevron-left" style="font-size: 50px; color: white;"></i></button>
<div class="calenderID" id="calender-0">
<div class="calender-box">
<h2 class="calender-month">%month%, %year%</h2>
<div class="calender-row">
<div class="calender-day calender-week">Sunday</div>
<div class="calender-day calender-week">Monday</div>
<div class="calender-day calender-week">Tuesday</div>
<div class="calender-day calender-week">Wednesday</div>
<div class="calender-day calender-week">Thursday</div>
<div class="calender-day calender-week">Friday</div>
<div class="calender-day calender-week">Saturday</div>
</div>
<div class="calender-row">
<div class="calender-day" id="1-Sunday">1</div>
<div class="calender-day" id="1-Monday">2</div>
<div class="calender-day" id="1-Tuesday">3</div>
<div class="calender-day" id="1-Wednesday">4</div>
<div class="calender-day" id="1-Thursday">5</div>
<div class="calender-day" id="1-Friday">6</div>
<div class="calender-day" id="1-Saturday">7</div>
</div>
<div class="calender-row">
<div class="calender-day" id="2-Sunday">8</div>
<div class="calender-day" id="2-Monday">9</div>
<div class="calender-day" id="2-Tuesday">10</div>
<div class="calender-day" id="2-Wednesday">11</div>
<div class="calender-day" id="2-Thursday">12</div>
<div class="calender-day" id="2-Friday">13</div>
<div class="calender-day" id="2-Saturday">14</div>
</div>
<div class="calender-row">
<div class="calender-day" id="3-Sunday">15</div>
<div class="calender-day" id="3-Monday">16</div>
<div class="calender-day" id="3-Tuesday">17</div>
<div class="calender-day" id="3-Wednesday">18</div>
<div class="calender-day" id="3-Thursday">19</div>
<div class="calender-day" id="3-Friday">20</div>
<div class="calender-day" id="3-Saturday">21</div>
</div>
<div class="calender-row">
<div class="calender-day" id="4-Sunday">22</div>
<div class="calender-day" id="4-Monday">23</div>
<div class="calender-day" id="4-Tuesday">24</div>
<div class="calender-day" id="4-Wednesday">25</div>
<div class="calender-day" id="4-Thursday">26</div>
<div class="calender-day" id="4-Friday">27</div>
<div class="calender-day" id="4-Saturday">28</div>
</div>
<div class="calender-row">
<div class="calender-day" id="5-Sunday">29</div>
<div class="calender-day" id="5-Monday">30</div>
<div class="calender-day" id="5-Tuesday">31</div>
<div class="calender-day" id="5-Wednesday">NaN</div>
<div class="calender-day" id="5-Thursday">NaN</div>
<div class="calender-day" id="5-Friday">NaN</div>
<div class="calender-day" id="5-Saturday">NaN</div>
</div>
<div class="calender-row">
<div class="calender-day" id="6-Sunday">29</div>
<div class="calender-day" id="6-Monday">30</div>
<div class="calender-day" id="6-Tuesday">31</div>
<div class="calender-day" id="6-Wednesday">NaN</div>
<div class="calender-day" id="6-Thursday">NaN</div>
<div class="calender-day" id="6-Friday">NaN</div>
<div class="calender-day" id="6-Saturday">NaN</div>
</div>
</div>
</div>
<!--
<div class="calender-box" id="calender-2">
<h2 class="calender-month">%month%, %year%</h2>
<div class="calender-row">
<div class="calender-day calender-week">Sunday</div>
<div class="calender-day calender-week">Monday</div>
<div class="calender-day calender-week">Tuesday</div>
<div class="calender-day calender-week">Wednesday</div>
<div class="calender-day calender-week">Thursday</div>
<div class="calender-day calender-week">Friday</div>
<div class="calender-day calender-week">Saturday</div>
</div>
<div class="calender-row">
<div class="calender-day" id="1-Sunday">1</div>
<div class="calender-day" id="1-Monday">2</div>
<div class="calender-day" id="1-Tuesday">3</div>
<div class="calender-day" id="1-Wednesday">4</div>
<div class="calender-day" id="1-Thursday">5</div>
<div class="calender-day" id="1-Friday">6</div>
<div class="calender-day" id="1-Saturday">7</div>
</div>
<div class="calender-row">
<div class="calender-day" id="2-Sunday">8</div>
<div class="calender-day" id="2-Monday">9</div>
<div class="calender-day" id="2-Tuesday">10</div>
<div class="calender-day" id="2-Wednesday">11</div>
<div class="calender-day" id="2-Thursday">12</div>
<div class="calender-day" id="2-Friday">13</div>
<div class="calender-day" id="2-Saturday">14</div>
</div>
<div class="calender-row">
<div class="calender-day" id="3-Sunday">15</div>
<div class="calender-day" id="3-Monday">16</div>
<div class="calender-day" id="3-Tuesday">17</div>
<div class="calender-day" id="3-Wednesday">18</div>
<div class="calender-day" id="3-Thursday">19</div>
<div class="calender-day" id="3-Friday">20</div>
<div class="calender-day" id="3-Saturday">21</div>
</div>
<div class="calender-row">
<div class="calender-day" id="4-Sunday">22</div>
<div class="calender-day" id="4-Monday">23</div>
<div class="calender-day" id="4-Tuesday">24</div>
<div class="calender-day" id="4-Wednesday">25</div>
<div class="calender-day" id="4-Thursday">26</div>
<div class="calender-day" id="4-Friday">27</div>
<div class="calender-day" id="4-Saturday">28</div>
</div>
<div class="calender-row">
<div class="calender-day" id="5-Sunday">29</div>
<div class="calender-day" id="5-Monday">30</div>
<div class="calender-day" id="5-Tuesday">31</div>
<div class="calender-day" id="5-Wednesday">NaN</div>
<div class="calender-day" id="5-Thursday">NaN</div>
<div class="calender-day" id="5-Friday">NaN</div>
<div class="calender-day" id="5-Saturday">NaN</div>
</div>
</div>
-->
<button class="nextMonth"><i class="fa fa-chevron-right" style="font-size: 50px; color: white;"></i></button>
</div>
<div class="planList-box">
<div class="planID" id="plan-0">
<h3 class="planList-title">%month% %day%</h3>
<div class="planList-items">
<div class="planList-item1 planList-item">• Do this and that</div>
<div class="planList-item2 planList-item">• do this and that plus it and at</div>
<div class="planList-item3 planList-item">• so you're a hacker ey?, add discord</div>
<div class="planList-item4 planList-item">• my discord is JinXz#1643 I wanna have a talk, because this is not right, and you know that</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
</body>
</html>

Answer 1

answer: I just figured out that this is not working, because I set the z-index of the element to -1, making it go under the .container layer.