230102 toggle button practice

돌리의 하루·2023년 1월 2일
1
post-custom-banner

html요소를 toggle버튼으로 나타나게 하거나 사라지게 만들게 하기.
더 나은 코드로 다시 수정할 예정!

html

<button class="toggle">toggle</button>
<div class="box" style="width: 100px; height: 100px; background: red;"></div>

javascript

var box = document.querySelector('.box');
var toggleBtn = document.querySelector('.toggle');
var toggle = (function () {
  var isShow = false;
    return function () {
    if(isShow===false){
      box.style.display = 'none';
      isShow = true;
    }else{
      box.style.display = 'block';
      isShow = false;
    }
  };
})();
  toggleBtn.onclick = toggle;
profile
진화중인 돌리입니다 :>
post-custom-banner

0개의 댓글