2주차 5강 진행 중 질문있습니다

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

2주차 5강 진행 중 질문있습니다

undefined주차

정*호

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

1주차 영화추천하기 페이지를 만드는 실습 중 강의에서는 부트스트랩을 사용하여 버튼을 구현하였지만 저는 버튼에 각각 클래스를 주어 구현하였습니다

출력되는 결과물이 다르지 않아 부트스트랩으로 수정하지 않았는데

오늘 강의에서 자바스크립을 통해 버튼에 onclick을 적용하여 닫기 버튼을 클릭하면 박스 닫기가 출력되게 구현하는 과정에서 저는 이전 강의와 다르게 버튼에 클래스를 부여해서 인지 onclick이 적용되지 않는 문제점이 발생하였습니다

물론 1주차 완성본을 붙여넣기 하여 강의를 진행하여도 문제가 없지만 클래스가 부여된 버튼에 onclick을 적용시키는 방법이 있을까요?

작성한 코드 및 에러 메세지

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
  <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

  <STYLE>
    * {
    font-family: 'Gowun Dodum', sans-serif;
}
    .mytitle{

      height: 250px;
      width: 100%;

      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
      background-position: center;
      background-size: cover;

      color: white;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .mytitle>button{
      width: 200px;
      height: 50px;

      background-color: transparent;
      color: white;

      border-radius: 50px;

      border: 1px solid white;

      margin-top: 10px;

    }
    .mytitle>button:hover{
       border: 2px solid white;
    }
    .mycommet{
      color: gray;
    }
    .wrap{
      max-width: 1200px;
      width: 95%;
      margin: 20px auto 0px auto;
    }
    .mypost{
      max-width: 500px;
      width: 95%;
      margin: 20px auto 0px auto;
      box-shadow: 0px 0px 3px 0px gray;
      padding: 20px;
    }
    .but{
      margin: 20px auto 10px auto;

      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .but1{
      width: 90px;
      height: 40px;

      margin: 0px 10px 0px 0px;

      background-color: black;
      color: white;
      border-radius: 10px;
      border: 1px solid black;
    }
    .but2{
      width: 60px;
      height: 40px;

      border-radius: 10px;
      border: 1px solid black;
    }


  </STYLE>
  <script>
    function open_box(){
      alert('박스 열기')
    }
    function close_box(){
      alert('박스 닫기')
    }

  </script>
</head>

<body>
      <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button onclick="open_box()">영화 기록하기</button>
      </div>
      <div class="mypost" id="post-box">
        <form class="form-floating">
          <input type="text" class="form-control" id="url" placeholder="name@example.com">
          <label for="floatingInputValue">영화 URL</label>
        </form>
        <div class="input-group mb-3">
          <label class="input-group-text" for="inputGroupSelect01">별점</label>
          <select class="form-select" id="inputGroupSelect01">
            <option selected>--선택하기--</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="3">⭐⭐⭐⭐</option>
            <option value="3">⭐⭐⭐⭐⭐</option>
          </select>
        </div>
        <div class="form-floating">
          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                    style="height: 100px"></textarea>
          <label for="floatingTextarea2">코멘트</label>

        </div>
        <div class="but">
          <button class="but1">기록하기</button>
<!--          이 부분이 문제입니다-->
          <button class="but2" onclick="class_box"()">닫기</button>
        </div>
        </div>
      </div>
      <div id="card-box" class="wrap">
        <div class="row row-cols-1 row-cols-md-4 g-4">
          <div class="col">
            <div class="card">
              <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                   class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                <p class="card-text">여기에 내용이 들어가지요.</p>
                <p>⭐⭐⭐</p>
                <p class="mycommet">여기에 코멘트가 들어갑니다.</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                   class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                <p class="card-text">여기에 내용이 들어가지요.</p>
                <p>⭐⭐⭐</p>
                <p class="mycommet">여기에 코멘트가 들어갑니다.</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                   class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                <p class="card-text">여기에 내용이 들어가지요.</p>
                <p>⭐⭐⭐</p>
                <p class="mycommet">여기에 코멘트가 들어갑니다.</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                   class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                <p class="card-text">여기에 내용이 들어가지요.</p>
                <p>⭐⭐⭐</p>
                <p class="mycommet">여기에 코멘트가 들어갑니다.</p>
              </div>
            </div>
          </div>
        </div>


      </div>
</body>

</html>

댓글 알림