Question.
<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만 넣어서 실행시켜 봤는데 잘되었습니다.Answer by 김인섭 튜터님.
아래 코드로 시도해주시기 바랍니다 ^^
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script language="javascript">
let num = 0;
function nextPage() {
console.log("tap")
if (num == 0) {
$('#text1').hide()
$('#text2').show()
num = num + 1; //num+=1 도 시도해봤어요
} else if (num == 1) {
$('#text2').hide()
$('#text3').show()
num = num + 1;
} else {
alert("새로고침")
}
}
</script>몇가지 문제점이 있었습니다
- $(#'') <- 이 문법은 jquery가 지원하는 문법으로 제이쿼리를 script에 넣어주셔야합니다
- while 문이 무한 반복되면서 끊임 없이 호출되어 새로고침이 무한반복되는 현상이 발견되었습니다
- let num = 0이 함수 안에 위치해 있어서 함수가 호출될때마다 num이라는 새로운 변수를 선언해서 num의 값이 수정되지 못했습니다
advice.
jquery를 사용할려면 제이쿼리 script가 있어야한다.
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
버튼을 누를때 함수 전체가 실행되기에 while문에 조건을 달지 않으면 무한반복이 된다.
(while로 반복, 누를때마다 한번씩 while문 안의 코드가 한번씩 실행되게 할려고 함..)<-잘못된 생각.
<script></script>는 js 하나의 파일이라고 생각하자.
실행 되는것은 function이지만 전역변수, 매개변수를 사용할 수 있다.
'❓내 질문' 카테고리의 다른 글
| Q4. 코드에 줄이 그여있어요. (0) | 2022.09.09 |
|---|---|
| Q3. 두 줄 이상일 때 flex로 가운데 정렬 방법이 궁금해요!(display 충돌) (0) | 2022.09.09 |
| Q1. css에서 사용한 요소가 무엇인지 모르겠어요 (0) | 2022.09.09 |