06. [버킷리스트] - GET 연습하기(버킷리스트 보여주기) 콘솔창에 아무 것도 없습니다

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

06. [버킷리스트] - GET 연습하기(버킷리스트 보여주기) 콘솔창에 아무 것도 없습니다

undefined주차

조*주

・

추천

・

조회수

답변 완료

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

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

아예 맨 처음 코드부터 새로고침까지 몇번을 해보아도 콘솔창에 입력한 값이 나와야 하는데 아무 것도 뜨지 않습니다.

원인이 무엇일까요?

작성한 코드 및 에러 메세지

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


<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />


  <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 href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />


  <title>인생 버킷리스트</title>


  <style>
    * {
      font-family: "Gowun Dodum", sans-serif;
    }


    .mypic {
      width: 100%;
      height: 200px;


      background-image: linear-gradient(0deg,
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)),
        url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");
      background-position: center;
      background-size: cover;


      color: white;


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


    .mypic>h1 {
      font-size: 30px;
    }


    .mybox {
      width: 95%;
      max-width: 700px;
      padding: 20px;
      box-shadow: 0px 0px 10px 0px lightblue;
      margin: 20px auto;
    }


    .mybucket {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }


    .mybucket>input {
      width: 70%;
    }


    .mybox>li {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;


      margin-bottom: 10px;
      min-height: 48px;
    }


    .mybox>li>h2 {
      max-width: 75%;
      font-size: 20px;
      font-weight: 500;
      margin-right: auto;
      margin-bottom: 0px;
    }


    .mybox>li>h2.done {
      text-decoration: line-through;
    }
  </style>
  <script>
    $(document).ready(function () {
      show_bucket();
    });
    function show_bucket() {
      fetch('/bucket').then(res => res.json()).then(data => {
        let rows = data['result']
        console.log(rows)
      })
    }


    function save_bucket() {
      let bucket = $('#bucket').val();


      let formData = new FormData();
      formData.append("bucket_give", bucket);


      fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
        alert(data["msg"]);
        window.location.reload();
      });
    }


  </script>
</head>


<body>
  <div class="mypic">
    <h1>나의 버킷리스트</h1>
  </div>
  <div class="mybox">
    <div class="mybucket">
      <input id="bucket" class="form-control" type="text" placeholder="이루고 싶은 것을 입력하세요" />
      <button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
    </div>
  </div>
  <div class="mybox" id="bucket-list">
    <li>
      <h2>✅ 호주에서 스카이다이빙 하기</h2>
    </li>
  </div>
</body>


</html>

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요

댓글 알림