javascript - Javascript 'window.CP.shouldStopExecution' - 不是一个对象？

Question

我是使用 javascript 的新手，我遇到了一个我无法弄清楚的问题。一切正常，直到我添加了根据您单击的按钮更改窗口大小的功能。TypeError: undefined is not an object (evaluating 'window.CP.shouldStopExecution')每当用户尝试运行该功能时，我都会收到错误消息，nav但我似乎无法弄清楚是什么导致了这个问题。我的语法对我来说是正确的..我做错了什么？

PS：任何有关如何比我输入的更有效地完成此任务的建议也将不胜感激。就像我说的，我是新手，很想学习如何用更少的代码行来完成相同的最终结果:)

function nav(elem) {
    var a = document.getElementsByTagName('a');
    var money = document.getElementById('money-page');
    var discipline = document.getElementById('discipline-page');
    var attendance = document.getElementById('attendance-page');
    var window = document.getElementsByClassName('action-window')[0];

    for (i = 0; i < a.length; i++) {
        // Remove the class 'active' if it exists
        a[i].classList.remove('active')
    }
    elem.classList.add('active');
  
    if (elem.id == 'money') {
      money.style.display = 'block';
      discipline.style.display = 'none';
      attendance.style.display = 'none';
      window.style.height = '600px';
    }
    if (elem.id == 'discipline') {
      money.style.display = 'none';
      discipline.style.display = 'block';
      attendance.style.display = 'none';
      window.style.height = '600px';
    }
    if (elem.id == 'attendance') {
      money.style.display = 'none';
      discipline.style.display = 'none';
      attendance.style.display = 'block';
      window.style.height = '500px';
    }
}

  .modal {
   display: block !important;
   position: fixed;
   z-index: 20;
   right: 0; top: 0;
   width: 100%; height: 100%;
   overflow: auto;
   background-color: rgba(0,0,0,0.4);
   -webkit-animation-name: fadeIn;
   -webkit-animation-duration: 0.4s;
   animation-name: fadeIn;
   animation-duration: 0.4s}

  .action-window{
   display: block;
   position: fixed;
   width: 450px; height: 600px;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 16px;
   background-color: white;
   transition: height 0.5s;}

  #action {
    display: grid;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
      "top"
      "content";}

/* --------[TOP] -------- */

  .modal-top{
    grid-area: top; 
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    font-size: 20px; font-weight: 800;
    background-color: #F2F2F2;
    border-bottom: 1px solid darkgray;}

  .modal-top ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none}
    .modal-top li{float: left}

  .modal-top a{
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    padding: 19px 12px;
    color: black !important}
    .modal-top a:hover:not(.active) {
      color: #5B7042 !important;
      background-color: #D9D9D9}

a.active {
  cursor: default;
  color: #5B7042 !important}


/* --------[CONTENT] -------- */
  .modal-content{
    padding: 20px;
    grid-area: content; 
    background-color: cyan;}

  .discipline {display: none}
  .attendance {display: none}

<link rel="stylesheet" href="https://classcolonies.com/resources/style.css">

  <div id="actionModal" class="modal">
    <div class="action-window">
      <form id="action" action='action.int.php' method='POST'>
        <div class='modal-top'>
          <ul>
            <li><a id='money' class='active' onclick='nav(this)'>Money</a></li>
            <li><a id='discipline' onclick='nav(this)'>Discipline</a></li>
            <li><a id='attendance' onclick='nav(this)'>Attendance</a></li>
          </ul>
        </div>
        <div class='modal-content'>
          <div id='money-page' class='money'>
            Cash Money bby
          </div>
          <div id='discipline-page' class='discipline'>
            Discipline menu here
          </div>
          <div id='attendance-page' class='attendance'>
            Attendance menu here
          </div>
        </div>
      </form>
    </div>
  </div>

标签： javascript