如果对象未定义，则阻止方法运行

时间：2019-05-26 22:40:21

标签： javascript html

如果对象未定义，我试图阻止方法运行，因此我在该对象上放置了if语句（如果不是，则为true）（不是）（试图查看我的代码更清楚），但是问题是，当我的应用程序中的输入为空时，可以正常工作，如下面的屏幕截图所示：

enter image description here

但是当我在输入中输入一些值时，我将其中之一留空时，所有值都消失了

enter image description here

如下面的屏幕快照所示，空输入将突出显示

enter image description here

我不想让他们保持这种状态，空的输入会用红色突出显示，并且错误当然会出现

当我删除上面告诉您的if语句（代码中if的{​​{1}}处于codepen snipet的第285行）时，出现此错误

enter image description here

这是可执行代码片段：https://codepen.io/Amoocris/pen/vPWOpX

请尝试在“全页”视图中打开它，因为它尚未响应

很抱歉，如果代码看起来很长，我想我尽量缩小代码，但是最终我没有删除太多，因为我认为应该很长一段时间，以便您容易理解应用程序的工作原理并帮助我解决我的问题，再次抱歉

JavaScript 

newPlan

HTML 

var UIController = (function(interCtrl) {

  var DOMstrings = {
    inputDay: ".optionList",
    inputTimeF: ".inputTime",
    inputTimeT: ".inputTime2",
    inputText: ".inputText",
    goingToCkecked: ".checkboxx",
    inputBtn: ".add__btn",
    planContainer: ".container",
    errorCase: ".error-case",
    optionList: ".optionList",
    optionListId: "#optionList",
    errorDes: "error-description",
  };


  return {
    getInput: function() {
      return {
        inputDay: document.querySelector(DOMstrings.inputDay).value,
        inputTimeF: document.querySelector(DOMstrings.inputTimeF).value,
        inputTimeT: document.querySelector(DOMstrings.inputTimeT).value,
        inputText: document.querySelector(DOMstrings.inputText).value,
        goingToCkecked: document.querySelector(DOMstrings.goingToCkecked).checked,


      };
    },
    getDOMstrings: function() {
      return DOMstrings;
    },
    addPlanList: function(obj, day) {

      var html, element, newHtml;
      //1.CREATE HTML WITH A PLACEHOLDER TEXT
      if (day === "Monday" || day === "Tuesday" || day === "Wednesday" || day === "Thursday" || day === "Friday" || day === "Saturday" || day === "Sunday") {
        html = '<h1 class="day"> %day%</h1><div class="plan-%ID%" style="text-align:center"><i class="fas fa-calendar-check check"></i><span class=""><span class="from">FROM: </span><span>%timef%</span><span class="to"> TO: </span><span class="">%timet%</span> <span class="to-do">I\'m going to %text%</span><i class="fas fa-times-circle"></i><span class="line"></span></span></span></div>';


        //2.REPLACE THE PLACEHOLDER TEXT WITH SOME ACTUAL DATA
console.log(obj);

        if (obj.id === 0) {
          newHtml = html.replace('%day%', day);
          newHtml = newHtml.replace('%ID%', obj.id);
          newHtml = newHtml.replace('%timef%', obj.from);
          newHtml = newHtml.replace('%timet%', obj.to);
          if (obj.goingToCkecked === false) {
            newHtml = newHtml.replace('I\'m going to %text%', obj.text);
          } else {
            newHtml = newHtml.replace('%text%', obj.text);
          }
        } else {
          newHtml = html.replace('%day%', "");
          newHtml = newHtml.replace('%ID%', obj.id);
          newHtml = newHtml.replace('%timef%', obj.from);
          newHtml = newHtml.replace('%timet%', obj.to);

          //3.add or remove the "I'm going to" prefix
          if (obj.goingToCkecked === false) {
            newHtml = newHtml.replace('I\'m going to %text%', obj.text);
          } else {
            newHtml = newHtml.replace('%text%', obj.text);
          }
        }

        //4.insert the element in the DOM
        element = DOMstrings.planContainer;

        document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);

      }
    }
  };

})(internalController); //END OF THE UICONTROLLER MODULE




var internalController = (function(UICtrl) {

  var Plan = function(id, from, to, text, goingToCkecked) {
    this.id = id;
    this.from = from;
    this.to = to;
    this.text = text;
    this.goingToCkecked = goingToCkecked;
  };

  var data = {
    Monday: [],
    Tuesday: [],
    Wednesday: [],
    Thursday: [],
    Friday: [],
    Saturday: [],
    Sunday: []
  };

  var toA = [];
  var fromA = [];
  var errorCase = false;


  var Dom = UICtrl.getDOMstrings();

  function removeError(x, y) {
    document.querySelector(x).style.visibility = "hidden";
    document.querySelector(y).classList.remove("error-red");
  }

  function errorVisible(x, y) {
    document.querySelector(x).style.visibility = "visible";
    document.querySelector(y).classList.add("error-red");

  }

  return {

    addItem: function(day, from, to, text, goingToCkecked) {
      var newPlan, ID;

      //2.change the input color to white when the user pick a DAY (in the error case)
      document.querySelector(Dom.optionListId).addEventListener("change", function() {
        removeError(Dom.errorCase, Dom.optionList);
      });

      //1.THE ERROR MESSAGE  SHOWS UP IF THE DAY IS NOT PICKED RIGHT
      if (day === 'pick the day') {
        errorVisible(Dom.errorCase, Dom.optionList);
        document.getElementsByClassName(Dom.errorDes)[0].innerHTML = "you should pick a day";
      }


      //4.REMOVE THE ERROR MESSAGE AS WELL AS THE RED COLOR FROM THE "FROM" INPUT
      document.querySelector(Dom.inputTimeF).addEventListener("keypress", function() {
        removeError(Dom.errorCase, Dom.inputTimeF);
      });

      //3.IF THE FROM INPUT IS EMPTY THE ERROR SHOWS UP  AND BLOCK THE APP AT THAT POINT
      if (from === "") {
        errorVisible(Dom.errorCase, Dom.inputTimeF);
        document.getElementsByClassName(Dom.errorDes)[0].innerHTML = "you should fill the \" from \" input";
        errorCase = true;
        return;
      }

      //refuse dupicated from values
      if (fromA.includes(from) === false && to != "" && text != "" && errorCase === false && day != "pick the day") {

        fromA.push(from);
        console.log("from array:");
        console.log(fromA);
        errorCase=false;

      } else if (fromA.includes(from) === true) {
        errorVisible(Dom.errorCase, Dom.inputTimeF);
        document.getElementsByClassName(Dom.errorDes)[0].innerHTML = "the \" from \" time is already chosen";
        errorCase = true;
        return;
      }


      //6.REMOVE THE ERROR MESSAGE AS WELL AS THE RED COLOR FROM THE "TO" INPUT
      document.querySelector(Dom.inputTimeT).addEventListener("keypress", function() {
        removeError(Dom.errorCase, Dom.inputTimeT);
      });

      //5.IF THE TO INPUT IS EMPTY THE ERROR SHOWS UP

      if (to === "") {
        errorVisible(Dom.errorCase, Dom.inputTimeT);
        document.getElementsByClassName(Dom.errorDes)[0].innerHTML = "you should fill the \" to \" input";
        return;
      }

      if (toA.includes(to) === false && from != "" && text != "" && errorCase === false && day !="pick the day") {

        toA.push(to);
        console.log("to array:");
        console.log(toA);
        errorCase=false;

      } else if (toA.includes(to) === true) {
        errorVisible(Dom.errorCase, Dom.inputTimeT);
        document.getElementsByClassName(Dom.errorDes)[0].innerHTML = "the \" to \" time is already chosen";
        return;
      }


      //7.REMOVE THE ERROR MESSAGE AS WELL AS THE RED COLOR FROM THE "TEXT" INPUT

      document.querySelector(Dom.inputText).addEventListener("keypress", function() {
        removeError(Dom.errorCase, Dom.inputText);
      });


      if (text === "") {
        errorVisible(Dom.errorCase, Dom.inputText);
        document.getElementsByClassName(Dom.errorDes)[0].innerHTML = "you should fill the \" text \" input";
        return;
      }




      //CREATE NEW ID
      if (data[day].length > 0) {
        ID = data[day][data[day].length - 1].id + 1;
      } else {
        ID = 0;
      }



      //CREATE NEW PLAN BASED ON THE PICKED DAY

      if (day === "Monday" || day === "Tuesday" || day === "Wednesday" || day === "Thursday" || day === "Friday" || day === "Saturday" || day === "Sunday") {
        newPlan = new Plan(ID, from, to, text, goingToCkecked);
      }



      //PUSH IT INTO OUR DATA STRUCTURE
      data[day].push(newPlan);

      //RETURN THE NEW ELEMENT
      return newPlan;

    }, //END OF THE ADD ITEM METHOD

    clearFields: function(fromInput, toInput, txtInput) {

      // get the from input back to the default value
      document.querySelector(fromInput).value = "";

      //get the "TO" input back to the default value
      document.querySelector(toInput).value = "";

      //get the "text" input back to it's default value
      document.querySelector(txtInput).value = "";

    },



  }; //end of the return object of the internal controller module


})(UIController);





var controller = (function(interCtrl, UICtrl) {
  var input,  DOM,newPlan;

  DOM = UICtrl.getDOMstrings();

  function setupEventListeners() {

    document.querySelector(DOM.inputBtn).addEventListener("click", ctrlAddPlans);

    document.addEventListener("keypress", function(e) {
      if (e.keyCode === 13) {
        document.activeElement.blur();
        ctrlAddPlans();
      }
    });

  }

  var ctrlAddPlans = function() {

    //3.get the filed input data
    input = UICtrl.getInput();

    //5.add the plan to the internalController

    newPlan = interCtrl.addItem(input.inputDay, input.inputTimeF, input.inputTimeT, input.inputText, input.goingToCkecked);

    //6.add the plan to the UI
    // if(newPlan){
      UICtrl.addPlanList(newPlan, input.inputDay);
    // }
    //7.clear the fields;

    interCtrl.clearFields(UICtrl.getDOMstrings().inputTimeF, UICtrl.getDOMstrings().inputTimeT, UICtrl.getDOMstrings().inputText);

  };

  return {
    init: function() {
      console.log('the app has started');
      setupEventListeners();
    },

  };
})(internalController, UIController);


controller.init();



setTimeout(

  function() {
    document.querySelector(".plansBackground").classList.add("height");
  }, 1000

);

0 个答案:

没有答案
相关问题
最新问题