>

사용자가 버튼을 클릭 한 후 버튼의 텍스트를 변경하는 것에 대한 간단한 질문이 있습니다.

버튼을 클릭하여 텍스트가 "More"와 "Less"의 두 값 사이를 전환하도록하고 싶습니다. 첫 번째 클릭 전에는 "More"값이 있어야하고 클릭 후에는 "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>

도움을 주셔서 감사합니다.

좋은 하루 보내세요


  • 답변 # 1

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

    /*
    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>
    
    

  • 답변 # 2

    기본적으로 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";
       }
    }
    
    

관련 자료

  • 이전 python - CSV에 두 개의 사전을 쓰는 방법은 무엇입니까?
  • 다음 java - 객체 배열의 객체 채우기, null 포인터 예외