JS Change the text in the button - 2

Question

Hello!

There is a problem when you click on the "Show all" button, it may change the name, but it may not change it, but it will open an accordion for anyone.

What could be the problem?

(If I leave one variant of JQuery (not slim) then the Bootstrap framework starts to behave inadequately.)

const btn = document.querySelector('.btn > span'); btn.addEventListener('click', function() { btn.innerHTML = (btn.innerHTML === 'Показать всё') ? btn.innerHTML = 'Скрыть' : btn.innerHTML = 'Показать всё'; })

 .card-card { border: 1px solid #d3d9de; border-radius: 2px; padding-top: 14px; margin-bottom: 20px; background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); } .card-t { border-top: 1px solid #d3d9de; padding-top: 10px; } .card-h { padding-bottom: 15px; } .buttons { padding-bottom: 15px; } .card-h img { width: 70%; height: auto; }

 <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <div class="container-fluid content-card"> <div class="row"> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src="images/diagnostics.png"> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">Диагностика</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#diagnostics">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src="images/fan.png"> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">Чистка</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#cleaning">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src="images/screen.png"> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">Замена матрицы</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#screen">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src="images/hinges.png"> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">Ремонт петель</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#hinges">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src="images/windows.png"> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">Установка Windows</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#install">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src="images/hdd.png"> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">Восстановление данных</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#recovery">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src="images/power.png"> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">Ремонт блока питания</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#power">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src="images/hdd-replace.png"> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">Замена жёсткого диска</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#hdd">Подробнее</button> </div> </div> </div> </div> </div> </div> <div class="container-fluid content-card2 collapse" id="services"> <div class="row"> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src=""> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">-</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src=""> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">-</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src=""> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">-</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success">Подробнее</button> </div> </div> </div> </div> <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12"> <div class="card-card"> <div class="card-h" align="center"> <img src=""> </div> <div class="card-t"> <p align="center" style="font-size: 17px; font-weight: 600;">-</p> <div class="buttons" align="center"> <button type="button" class="btn btn-outline-success">Подробнее</button> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="col-sm-12 col-xs-12 col-lg-12 col-md-12" align="center" style="border-bottom: 1px solid #ccc; padding-bottom: 30px;"> <button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" style="margin-top: 15px;" id="show"><span>Показать всё</span></button> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Answer 1 · 2018-02-15T17:27:04

Now you have a problem on the site due to the fact that the button changes the text only by pressing the span which is inside the button itself. You may not get to <span>Показать всё</span> and the spoiler will open, but the text will not change.

(The red line on the picture indicates the place where the text will not change when clicked) .

.btn > span should replace .btn > span with #show . (show - button id) .

 const btn = document.querySelector('.btn > span'); const btn = document.querySelector('#show');

Your second decision with editing the second option on #show changed to the root, the button began to work stably.
If there is a button tag, then for nested elements, handlers will be called only in chrome.

JS Change the text in the button - 2

1 answer 1

More articles: