html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경

이는 다음을 통해 바닐라 자바 ​​스크립트를 사용하여 달성 할 수 있습니다 :

/*
Fetch the buttom element
*/
const button = document.body.querySelector('[data-target="#collapseExample"]');
/*
Add click event listener where we will provide logic that updates the button text
*/
button.addEventListener('click', function() {
  
  /*
  Update the text of the button to toggle beween "More" and "Less" when clicked
  */
  if(button.innerText.toLowerCase() === 'less') {
    button.innerText = 'More';
  }
  else {
    button.innerText = 'Less';
  }
});

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
More
</button>
<div class="collapse" id="collapseExample">
   <p>Test</p>
</div>

기본적으로 onclick 를 추가 할 수 있습니다   function 를 참조하는 버튼 이벤트  이렇게 :

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="changeText()">
More
</button>

그런 다음 JavaScript function 를 준비합니다  텍스트를 변경하려면 :

function changeText () {
   if (this.innerText == "More") { // check if text inside is "More"
      this.innerText == "Less";    // If so, change to "Less"
   } else {
      this.innerText == "More";
   }
}