함수가 정의되지 않았다고 뜹니다


  <body>
    <div id="menu">
      <div
        class="menu"
        style="
          font-size: 350%;
          text-align: justify;
          left: 75%;
          top: 1%;
          color: white;
          height: 33px;
          width: 17%;
          line-height: 50%;
        "
        onclick="mclose()"
      >
        ×
      </div>
      <div class="menu" style="top: 50px;">내 정보</div>
      <div class="menu" style="top: 100px;">아이템</div>
      <div class="menu" style="top: 150px;">장비</div>
      <div class="menu" style="top: 200px;">전투</div>
      <div class="menu" style="top: 250px;">메인퀘스트</div>
      <div class="menu" style="top: 300px;">임무</div>
      <div class="menu" style="top: 350px;">대장간</div>
      <div class="menu" style="top: 400px;">요리</div>
      <div class="menu" style="top: 450px;">가공</div>
      <div class="menu" style="top: 500px;">창고</div>
      <div class="menu" style="top: 550px;">거래</div>
      <div class="menu" style="top: 600px;">이동</div>
      <div class="menu" style="top: 650px;">도감</div>
      <div class="menu" style="top: 700px;">설정</div>
    </div>
    <div id="closedmenu">
      <div
        id="menuopen"
        onclick="mopen()"
        style="
          position: absolute;
          color: white;
          font-size: 350%;
          left: 15%;
          height: 33px;
          width: 33px;
          top: 1%;
          line-height: 50%;
        "
      >
        =
      </div>
    </div>
  </body>
  <script src="../js/menu.js">
  </script>
</html>

function mopen() {
  document.getElementById("closedmenu").style.display = "none";
  document.getElementById("menu").style.display = "block";
}

function mclose() {
  document.getElementById("menu").style.display = "none";
  document.getElementById("closedmenu").style.display = "block";
}

이 상태에서 = 버튼을 누르면 ReferenceError mopen is not defined 라고뜹니다. 찾아볼것도 나름 최선을 다해 찾아봤는데... 독학에다 며칠 안 되서 그런지 이렇게 뜨는 이유를 모르겠습니다.