show() hide() 함수 질문드립니다 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

show() hide() 함수 질문드립니다

undefined주차

김*민

・

추천

・

조회수

답변 완료

<head>
.
.
<style>
  .text2{ /*text3동일 text1은 display:none 만 없고 나머지는 다 동일합니다.*/max-width: 100vw;
      width: 80%;
      max-height: 100vh;
      height: 13%;
  
      background-color: rgba(244, 244, 255, 0.9);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  
      border-radius: 200px;
      border: 20px solid white;
  
      display: flex;
      flex-direction: center;
      justify-content: center;
      align-items: center;
  
      text-align : center;
  
      display: none;
</style>

<script>function nextPage() {
    let num = 0;
    while (num < 3) {
        if (num == 0) {
            $("#text1").hide();
            $("#text2").show();
            num + 1; //num+=1 도 시도해봤어요
        } else if (num == 1) {
            $("#text2").hide();
            $("#text3").show();
            num + 1;
        } else {
            alert("새로고침")
        }
    }
}
</script>
</head>

<body style="overflow:hidden;">
    <div class="main" onclick="nextPage()">
            <div class="text1" id="text1">
                <h1>환영합니다.</h1>
            </div>
            <div class="text2" id="text2">
                <h1>example2.</h1>
            </div>
            <div class="text3" id="text3">
                <h1>example3</h1>
            </div>
        </div>
    </div>
</body>

1. 들어가면 text1번이 화면에 출력되어 있고 text2,3은 display:none으로 보이지 않습니다.
2. 아무곳이나 클릭하면 함수가 실행되게 하고 싶어 전체 div class="main"에 onclick을 넣었습니다
3. 해당 스크립트를 실행시키고 클릭해도 아무런 반응이 없습니다.
4. 테스트로 alert만 넣어서 실행시켜 봤는데 잘되었습니다.

댓글 알림