르탄이 디폴트 값을 display: none 또는 visibility: hidden으로 바꾸고 싶습니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

르탄이 디폴트 값을 display: none 또는 visibility: hidden으로 바꾸고 싶습니다.

undefined주차

김*탁

・

추천

・

조회수

답변 완료

르탄이 디폴트 값을 display: none 또는 visibility: hidden으로 바꾸고 싶습니다.

아래 화면에서 르탄이 나와 버튼 이하의 항목은 처음 로딩될 때에는 숨겼다가

버튼 클릭하면 르탄이가 나오게 하고 싶은데 잘 구현이 안 되네요.

작성한 코드 및 에러 메세지

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
      div.question-box {
        margin: 10px 0 20px 0;
      }
      div.question-box > div {
        margin-top: 30px;
      }
      .defaultDisplay {
        visibility: hidden;
      }

    </style>

    <script>
      function q1() {
        $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/rtan",
          data: {},
          success: function (response) {
            let url = response['url']
            let msg = response['msg']

            $('#img-rtan').attr('src',url)
            $('#text-rtan').text(msg)
          }
        })
      }

    </script>

  </head>
  <body>
    <h1>JQuery+Ajax의 조합을 연습하자!</h1>

    <hr/>

    <div class="question-box">
      <h2>3. 르탄이 API를 이용하기!</h2>
      <p>아래를 르탄이 사진으로 바꿔주세요</p>
      <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
      <button onclick="q1()">르탄이 나와</button>
      <div class="defaultDisplay">
        <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
      </div>
    </div>
  </body>
</html>

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

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

댓글 알림