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

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

QA

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

본문

2000710757_1610964380.7963.png

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

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

=> 이렇게 변경해야 되지 않나요?

답변을 작성하시기 전에 로그인 해주세요.
전체 1,178
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT