[바닐라JS] 클릭하면 텍스트 변경

HTML

<section id="part">
  <span>안녕하세요</span>
  <button type= "button" id="go">클릭!</button>
</section>

 

CSS

section{
  text-align:center;
  margin-top: 7%;
}

span{
  font-size: 60px;
  display:block;
}

button{
  width: 60px;
  height: 34px;
  margin-top: 30px;
}

 

JS

const text = document.querySelector("#part span");
const btn = document.querySelector("#go");

function change(){
  text.innerText = '피카츄입니다'
}

btn.addEventListener("click", function(change){
  if(text.innerText === '안녕하세요'){
    text.innerText = '피카츄입니다';
  } else text.innerText = '안녕하세요';
});

 

버튼을 클릭하면 

안녕하세요 > 피카츄입니다 > 안녕하세요 > 피카츄입니다 .... 반복