그누보드 QA - js 기본 버튼 문제 입니다..가르쳐주세요.

js 기본 버튼 문제 입니다..가르쳐주세요.

aaron2535 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2021.01.18 19:10:41 2587 (119.♡.♡.101)

본문

버튼을 클릭하면 저렇게 문단이 나오는 코드를 풀어보고 싶은데요.

자바에 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>