1주차 과제에 자바스크립트 팝업을 넣어보려고 하는데 안됩니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

1주차 과제에 자바스크립트 팝업을 넣어보려고 하는데 안됩니다.

undefined주차

김*오

・

추천

・

조회수

답변 완료

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

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

1주차 과제에 자바스크립트 시간에 배운 팝업을 넣어보려고 하는데 잘 되지 않습니다.

응원 남기기 버튼을 누르면 "윤덕은 사랑입니다" 라는 팝업을 표시해보려고 하는데 똑같이 따라해도 팝업이 나타나지 않습니다.

어디에 문제가 있는지 모르겠어서 질문 드립니다.

<!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>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@400;500;600;700&display=swap" rel="stylesheet">

  <title>윤하 - 팬명록</title>
  <style>
    * {
      font-family: 'Hahmlet', serif;
    }
    .mytitle {
      background-color: green;
      width: 100%;
      height: 250px;

      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjExMDJfMjcw%2FMDAxNjY3MzE3MjAxNTg5.xqB_LKPcPUaM0D2gyG3hsb0Go7ku3e5t-x8_Grk6O3Ig.qVBBFNPvSAteCrSA5h5BvJwE522cbxnimpjxR9CNkHkg.JPEG.ddong82999%2F1101_11.jpg&type=sc960_832);
      background-position: center;
      background-size: cover;

      color: white;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .mypost {
      width: 90%;
      max-width: 500px;

      margin: 20px auto 0px auto;
      box-shadow: 0px 0px 3px 0px gray;
      padding: 20px;
    }
    .mypost > button {
      margin-top: 10px;
    }
    .cards {
      margin-top: 20px;
    }
    .card {
      width: 90%;
      max-width: 500px;

      margin: 10px auto 0px auto;
      box-shadow: 0px 0px 3px 0px gray;
    }
  </style>
  <script>
    function hey(){
        alert('윤덕는 사랑입니다');
    }
  </script>
</head>

<body>
    <div class="mytitle">
        <h1>윤하 팬명록</h1>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="URL" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">닉네임</label>
        </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>
        <button type="button" class="btn btn-dark" onclick="hey()">응원 남기기</button>
    </div>
    <div class="cards">
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요!</p>
            <footer class="blockquote-footer">호빵맨</footer>
          </blockquote>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요!</p>
            <footer class="blockquote-footer">호빵맨</footer>
          </blockquote>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요!</p>
            <footer class="blockquote-footer">호빵맨</footer>
          </blockquote>
        </div>
      </div>
    </div>
</body>

</html>

댓글 알림