[Error] JavaScript 작동 안 됨

Error: JavaScript 코드 일부가 작동 안 됨.

$(function() {

  $("#detailDelete").on("click", function() {

    alert("delete 버튼 누름!");

    let pass = $("#pass").val();

    if(pass.length <= 0) {

      alert("비밀번호를 입력해 주세요");

      return false;

    }

   

    $("#rPass").val(pass);

    $("#checkForm").attr("action", "delete");

    $("#checkForm").attr("method", "post");

    $("#checkForm").submit();

  });

  $("#detailUpdate").on("click", function() {

    var pass = $("#pass").val();

    if(pass.length <= 0) {

      alert("게시 글을 수정하려면 비밀번호를 입력하세요.");

      return false;

    }

    $("#rPass").val(pass);

    $("#checkForm").attr("action", "update");

    $("#checkForm").attr("method", "post");

    $("#checkForm").submit();

  })

})

같은 양식의 $("#detailUpdate") 코드는 작동하는데, $("#detailDelete") 코드는 작동하지 않는다.

alert("delete 버튼 누름!"); 코드를 삽입해 확인한 결과 버튼이 눌러지지도 않은 것.

 

Solve Process

1. javascript 명령을 사용하는 view 페이지

<div class="row my-3">

  <div class="col text-center">

    <input type="button" class="btn btn-warning" id="detailUpdate" value="수정하기" >

    &nbsp;&nbsp;

    <input type="button" class="btn btn-danger" id="detailDelete" value="삭제하기" >

    &nbsp;&nbsp;

    <input type="button" class="btn btn-primary" value="목록보기"

      onclick="location.href='boardList'">

  </div>

</div>

id 일치. 문제 못 찾음.

 

2. 문제점을 못 찾아서 기존에 성공했던 게시판에서 view 페이지와 JavaScript 파일을 통째로 복사 붙여넣기 해봄.

여전히 이 삭제하기 버튼만 작동 안함.

 

3. 코드 순서를 바꿔봄.

$(function() {

  $("#writeForm").on("submit", function() {

    if($("#writer").val().length <= 0) {

      alert("작성자를 입력해주세요.");

      $("#writer").focus();

      return false;

    }

    if($("#title").val().length <= 0) {

      alert("제목을 입력해주세요.");

      $("#title").focus();

      return false;

    }

    if($("#pass").val().length <= 0) {

      alert("비밀번호를 입력해주세요.");

      $("#pass]").focus();

      return false;

    }

    if($("#content").val().length <= 0) {

      alert("내용을 입력해주세요.");

      $("#content").focus();

      return false;

    }

  })

  $("#detailUpdate").on("click", function() {

    var pass = $("#pass").val();

    if(pass.length <= 0) {

      alert("게시 글을 수정하려면 비밀번호를 입력하세요.");

      return false;

    }

    $("#rPass").val(pass);

    $("#checkForm").attr("action", "update");

    $("#checkForm").attr("method", "post");

    $("#checkForm").submit();

  })

  $("#updateForm").on("submit", function() {

    if($("#writer").val().length <= 0) {

      alert("작성자를 입력해주세요.");

      $("#writer").focus();

      return false;

    }

    if($("#title").val().length <= 0) {

      alert("제목을 입력해주세요.");

      $("#title").focus();

      return false;

    }

    if($("#pass").val().length <= 0) {

      alert("비밀번호를 입력해주세요.");

      $("#pass]").focus();

      return false;

    }

    if($("#content").val().length <= 0) {

      alert("내용을 입력해주세요.");

      $("#content").focus();

      return false;

    }

  })

  $("#detailDelete").on("click", function() {

    let pass = $("#pass").val();

    if(pass.length <= 0) {

      alert("비밀번호를 입력해 주세요");

      return false;

    }

   

    $("#rPass").val(pass);

    $("#checkForm").attr("action", "delete");

    $("#checkForm").attr("method", "post");

    $("#checkForm").submit();

  });

})

 

$("#detailDelete") 코드를 맨 위에서 맨 아래로 옮겼더니 정상 작동한다.

이유를 모르겠다.. 선생님께 여쭤봐야겠다.

Result

JavaScript 사용 할 때마다 오류가 생긴다. jQuery를 하루 만에 휘뚜루마뚜루 배우고 넘어간 것 때문인가.

어쨌든 그런 만큼 이제부터 만나는 오류 마다 확실하게 이유를 밝히고 배워나가면 된다.