Hello!

Please tell me how to change the text in the button when you click on it and then return the text after the second click.

I apologize for the stupid question, because I did not understand JS yet.

PS The site uses the framework Bootstrap 4.

<button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show"><span>Показать всё</span></button>

  • Thank you very much, very helpful! I'll put it in snippets and take up the study of JS as soon as possible :) - dragunov_m

3 answers 3

 const btn = document.querySelector('.btn > span'); btn.addEventListener('click', function() { btn.innerHTML = (btn.innerHTML === 'Показать всё') ? btn.innerHTML = 'Скрыть всё' : btn.innerHTML = 'Показать всё'; }) 
 <button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show"><span>Показать всё</span></button>

And the second option, if the button is not the first or not the only one ....

 const btn = document.querySelectorAll('.btn > span'); for (let i = 0; i < btn.length; i++) { btn[i].addEventListener('click', function() { this.innerHTML = (this.innerHTML === 'Показать всё') ? this.innerHTML = 'Скрыть всё' : this.innerHTML = 'Показать всё'; }) } 
 <button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show"><span>Показать всё</span></button> <button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show_2"><span>Показать всё</span></button> <button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show_3"><span>Показать всё</span></button> <button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show_4"><span>Показать всё</span></button>

  • What if the element .btn> span is not the first on the page? - Mr. Brightside
  • @ Mr.Brightside, set the class to the span tag and specify the class (in my understanding) - dragunov_m
  • @dragunov_m element has id =) - Mr. Brightside
  • @ Mr.Brightside did not notice :) - dragunov_m
  • @Air I also noticed that in the first version the button changes correctly, but then the fun begins. They consist in the fact that the button leaves the name, but the spoiler works. - dragunov_m

Of course, the answers have already been given, but it came to my mind a funny solution with jQuery :)))

 $('button').click(function() { $('span').toggle(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button> <span>Показать всё</span> <span style="display:none">Вернуть назад</span> </button>

    More about text .

     $("button").click(function() { $(this).text(function(i, text) { return text === "Показать всё" ? "Скрыть всё" : "Показать всё"; }) }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show"><span>Показать всё</span></button>

    • The problem is that the button changes the name on the first click, on the second it opens the spoiler and saves the changed name. By the third click, it changes to the original, but as a result we have not what we need. - dragunov_m
    • When you press the button, it can open the accordion and not change the name. A good example: test.expertpc.by - dragunov_m