バニラJavaScriptを使用した切り替えボタンの作成


バニラjavascriptの練習では、簡単なUIを作成することをお勧めします.
だから切り替えボタンを作る
<div class="wrap">
	<button class="toggleBtn">토글</button>
	<p class="toggleTarget">
    	Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, placeat. Reiciendis quia amet, quam nemo quos quod distinctio explicabo saepe cupiditate, quasi perspiciatis magnam.
    </p>
  </div>
HTMLは上記の通りです.
.toggleBtn{
  display: block;
  width: 80px;
  height: 50px;
  margin: 50px auto 0;
}
.toggleTarget{
  width: 800px;
  margin: 20px auto 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}

.toggleTarget.on{
  display: block;
}
CSSは上記の通りです.
// 토글버튼 만들기
const _toggleBtn = _get('.toggleBtn')
const _toggleTarget = _get('.toggleTarget')


const toggleEvent = () => {
  if(_toggleTarget.className == 'toggleTarget'){
    _toggleTarget.className = 'toggleTarget on'
  } else {
    _toggleTarget.className = 'toggleTarget'
  }
}

_toggleBtn.addEventListener('click', toggleEvent)
JSは上記の通りです.
入力文字をうまく利用してほしい.
私も初心者ですが、入門者の時、このコードを直接書くのは難しいです.