티스토리 뷰

<div id="container">
  <h1 id="heading">에디오피아 게뎁</h1>
  <div id="prod-pic">
    <img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
    <div id="small-pic">
        <img src="images/coffee-pink.jpg" class="small">
        <img src="images/coffee-blue.jpg" class="small">
        <img src="images/coffee-gray.jpg" class="small">
    </div>
  </div>			
  <div id="desc">
    <ul>
      <li>상품명 : 에디오피아 게뎁</li>
      <li class="bluetext">판매가 : 9,000원</li>
      <li>배송비 : 3,000원<br>(50,000원 이상 구매 시 무료)</li>
      <li>적립금 : 180원(2%)</li>
      <li>로스팅 : 2019.06.17</li>
      <button>장바구니 담기</button>
    </ul>				
    <a href="#" id="view">상세 설명 보기</a>				
  </div>
  <hr>
  <div id="detail">									
    <h2>상품 상세 정보</h2>
    <ul>
      <li>원산지 : 에디오피아</li>
      <li>지 역 : 이르가체프 코체레</li>
      <li>농 장 : 게뎁</li>
      <li>고 도 : 1,950 ~ 2,000 m</li>
      <li>품 종 : 지역 토착종</li>
      <li>가공법 : 워시드</li>
    </ul>
    <h3>Information</h3>
    <p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
    <h3>Flavor Note</h3>
    <p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
  </div>
</div>

책 코드

var isOpen = false;

var view = document.querySelector("#view");
view.addEventListener("click", function () {
  if (isOpen == false) {
    document.querySelector("#detail").style.display = "block";
    view.innerHTML = "상세 설명 닫기";
    isOpen = true;
  } else {
    document.querySelector("#detail").style.display = "none";
    view.innerHTML = "상세 설명 보기";
    isOpen = false;
  }
});

책 코드 읽기

Q. <a>의 링크 이벤트를 막지 않았는데 작동한다. 왜지?

<a href="#" id="view">상세 설명 보기</a>
var view = document.querySelector("#view");
view.addEventListener("click", function () { ... });

 

<a>의 고유 이벤트인 링크를 막기 위해서는 아래의 코드를 사용해야한다. (막지 않으면 href의 주소로 이동한다.)

event.preventDefault();

 

그런데 책 코드에서는 링크 이벤트를 막지 않았는데도 잘 동작했다.

(addEventListner, 다른 이벤트를 사용해도 잘 동작함)

 

HTML에서 href 주소를 변경해보았다. 링크 이벤트가 동작하고, 블로그로 이동하였다.

<a href="https://mill-study.tistory.com/" id="view">상세 설명 보기</a>

[결론]

href의 주소 값에 의해서 <a>의 고유 링크 이벤트가 동작하는 것이었다.

 

[내 생각]

<a>는 다른 페이지를 이동하거나, 페이지내의 위치를 이동을 할 때 사용하는 것이므로 <button>태그를 사용하는 것이 옳바르다고 생각한다.


내 코드와 비교하기

// 책 코드
var isOpen = false;

var view = document.querySelector("#view");
view.addEventListener("click", function () {
  if (isOpen == false) {
    document.querySelector("#detail").style.display = "block";
    view.innerHTML = "상세 설명 닫기";
    isOpen = true;
  } else {
    document.querySelector("#detail").style.display = "none";
    view.innerHTML = "상세 설명 보기";
    isOpen = false;
  }
});
// 내 코드
const view = document.querySelector('#view');

view.onclick = showDetail;

function showDetail(event){
  event.preventDefault();
  const target = this.parentElement.nextElementSibling.nextElementSibling;

  if(this.classList.contains('active')){
    this.textContent = '상세 설명 닫기';
    target.classList.remove('show');
  } else {
    this.textContent = '상세 설명 열기';
    target.classList.add('show');
  }
  this.classList.toggle('active');
}

책 코드에서는 활성화 됐을 때 붙는 class가 없기 때문에 isOpen이라는 방식을 사용했다.

활성화를 class로 구분하지 않을 때 사용하면 좋을 것 같다.


[공부 좌표]

Do It! 자바스크립트 기본편 P257 ~ 261

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함