Javascript 如果函数出现错误，如何停止执行？

我正在构建一个网络应用程序，为用户的一周做计划，因此需要：从，到，文本输入，如下面的屏幕截图所示：

因此，为了避免从或到输入的重复，我为从和到输入创建了两个数组，称为

fromA

和

toA

，一切都正常，只是我的id有一些问题，这是因为当用户输入一个重复的值时，会显示一个错误，

addItem

方法返回，如下面的屏幕截图所示

这是我的代码：

JavaScript：

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

        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
    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();

var UIController=（函数（interCtrl）{
var DOMstrings={
inputDay:“.optionList”，
inputIMEF:“.inputIME”，
INPUTTIME:“.inputTime2”，
inputText:“.inputText”，
GoingTocked:“.checkboxx”，
输入btn:“.add\u btn”，
planContainer:“.container”，
errorCase:“.error case”，
optionList:“.optionList”，
optionListId:“#optionList”，
errorDes：“错误描述”，
};
返回{
getInput:function（）{
返回{
inputDay:document.querySelector（DOMstrings.inputDay）.value，
inputTimeF:document.querySelector（DOMstrings.inputTimeF）.value，
inputImet:document.querySelector（DOMstrings.inputImet）.value，
inputText:document.querySelector（DOMstrings.inputText）.value，
GoingTocked:document.querySelector（DOMstrings.GoingTocked）。选中，
};
},
getDOMstrings:function（）{
返回字符串；
},
addPlanList：功能（对象，日期）{
var-html，元素，newHtml；
//1.使用占位符文本创建HTML
如果（日==“星期一”|日==“星期二”|日==“星期三”|日==“星期四”|日==“星期五”|日==“星期六”|日==“星期日”）{
html=“%day%FROM:%timef%TO:%timet%I要转到%text%”；
//2.用一些实际数据替换占位符文本
如果（对象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.goingtocked==false）{
newHtml=newHtml.replace（'我要到%text%'，obj.text）；
}否则{
newHtml=newHtml.replace（“%text%”，obj.text）；
}
}否则{
newHtml=html.replace（“%day%”，“”）；
newHtml=newHtml.replace（“%ID%”，obj.ID）；
newHtml=newHtml.replace（“%timef%”，obj.from）；
newHtml=newHtml.replace（“%timet%”，obj.to）；
//3.添加或删除“我要去”前缀
if（obj.goingtocked==false）{
newHtml=newHtml.replace（'我要到%text%'，obj.text）；
}否则{
newHtml=newHtml.replace（“%text%”，obj.text）；
}
}
//4.在DOM中插入元素
元素=DOMstrings.planContainer；
document.querySelector（element.insertAdjacentHTML（'beforeend'，newHtml）；
}
}
};
})（财务总监）//UICONTROLLER模块结束
var internalController=（函数（UICtrl）{
变量计划=函数（id、from、to、text、GoingTocked）{
this.id=id；
this.from=from；
这个；
this.text=文本；
this.goingtocked=goingtocked；
};
风险值数据={
星期一：[]，
星期二：[]，
星期三：[]，
星期四：[]，
星期五：[]，
星期六：[]，
星期日：[]
};
var-toA=[]；
var fromA=[]；
var errorCase=false；
var Dom=UICtrl.getDOMstrings（）；
函数删除错误（x，y）{
document.querySelector（x.style.visibility=“hidden”；
document.querySelector（y）.classList.remove（“红色错误”）；
}
函数errorVisible（x，y）{
document.querySelector（x.style.visibility=“可见”；
document.querySelector（y）.classList.add（“红色错误”）；
}
返回{
附加项：函数（日期、从、到、文本、转到已选中）{
var-newPlan，ID；
//2.当用户选择一天时，将输入颜色更改为白色（在错误情况下）
document.querySelector（Dom.optionListId）.addEventListener（“更改”，函数（）{
removeError（Dom.errorCase、Dom.optionList）；
});
//1.如果未正确选择日期，则会显示错误消息
如果（日期=='选择日期'）{
errorVisible（Dom.errorCase、Dom.optionList）；
document.getElementsByClassName（Dom.errorDes）[0].innerHTML=“您应该选择一天”；
}
//4.从“FROM”输入中删除错误消息和红色
document.querySelector（Dom.inputTimeF）.addEventListener（“keypress”，function（））{
removeError（Dom.errorCase，Dom.inputTimeF）；
});
//3.如果FROM输入为空，则会显示错误并在该点阻止应用程序
如果（从==“”）{
errorVisible（Dom.errorCase，Dom.inputTimeF）；
document.getElementsByClassName（Dom.errorDes）[0].innerHTML=“您应该从\”输入“中填写\”；
errorCase=true；
返回；
}
//拒绝重复价值观
if（fromA.includes（from）==false&&to！=“&&text！=”&&errorCase==false&&day！=“选择日期”）{
推（从）；
log（“来自数组：”）
console.log（fromA）；
errorCase=false；
}else if（fromA.includes（from）==true）{
errorVisible（Dom.errorCase，Dom.inputTimeF）；
document.getElementsByClassName（Dom.errorDes）[0].innerHTML=“时间已选定”；
errorCase=true；
返回；
}
//6.从“至”输入中删除错误消息和红色
document.querySelector（Dom.inputDimet）.addEventListener（“按键”，函数（）{
removeError（Dom.errorCase，Dom.inputImet）；
});
//5.如果TO输入为空，则显示错误
如果（到==“”）{
errorVisible（Dom.errorCase，Dom
if(newPlan){
  UICtrl.addPlanList(newPlan, input.inputDay);
}