Двойной для l oop с неработающим addEventListener - PullRequest
1 голос
/ 25 мая 2020

Итак, моя трудность состоит в том, что я не могу получить addEventListener для каждого дня в моем календаре. Я хочу добавить прослушиватель событий, чтобы, когда пользователь нажимает на него, он отображал планы, которые у него есть на этот день. Всякий раз, когда я пытаюсь запустить его, он иногда выдает ошибку, а иногда ничего не происходит. Я знаю, что это как-то связано с закрытием, но я относительно новичок в javascript. Я пробовал querySelectorAll, но это тоже не сработало

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>

1 Ответ

0 голосов
/ 25 мая 2020

ответ: Я только что понял, что это не работает, потому что я установил z-index элемента на -1, сделав его go под слоем .container.

...