js 기본 버튼 문제 입니다..가르쳐주세요. 채택완료
버튼을 클릭하면 저렇게 문단이 나오는 코드를 풀어보고 싶은데요.
자바에 onclick을 안쓰고 쿼리셀렉터랑 애드리스너 이벤트로 풀어보고 싶어서 코드를 짜봤는데요..
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>자바스크립트 이벤트</title>
<link rel="stylesheet" href="css/event.css">
</head>
<body>
<div id="item">
<img src="images/flower1.jpg" alt="">
<button class="over" id="open" >상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
<p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>
<button id="close" >상세 설명 닫기</button>
</div>
</div>
<script>
var show=document.querySelector("#open")
var text=document.querySelector("#desc")
show.addEventListener("click",function(){
if(text.click==true){
if(text.click==true)
show.style.display="block";
text.style.display="block";
}else{
show.style.display="none";
text.style.display="none";
}
});
var button=document.querySelector("#close")
button.addEventListener("click",function(){
if(text.click==true){
button.style.display="none";
text.style.display="block";
}else{
button.style.display="block";
show.style.display="none";
}
});
</script>
</body>
</html>
제 코드는 버튼만 사라지는 현상이 발생 합니다..
자세히 알려주시면 감사드리겠습니다..
꼭 온클릭을 써야지만 풀수 있는 문제 인가요???
답변 2개
디테일에 보이구 말구 이벤트를 걸어야되는데 버튼에 대한 디스플레이를 걸어 두셔서 그래요
show text를 살펴보세요 show가 버튼을 지칭하고 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
var button=document.querySelector("#close")
button.addEventListener("click",function(){
if(text.click==true){
button.style.display="none";
text.style.display="block";
}else{
button.style.display="block";
show.style.display="none";
}
});
show.style.display="none";
=> text.style.display="none";
=> 이렇게 변경해야 되지 않나요?
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인