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가 버튼을 지칭하고 있습니다
감사합니다 ㅎㅎㅎㅎㅎ 어떻게 접근해서 풀어야 하는지 아래 분과 님 덕분에 조금이나마 알것 같습니당~
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";
=> 이렇게 변경해야 되지 않나요?
ㅠㅠㅠ 작동이 안됩니다..그래도 알려주시기 위해 귀한 시간 내서 작성 해주셔서 너무 감사합니다...
