При нажатии на кнопку изменить текст

161
14 декабря 2018, 02:30

Как при нажатии на кнопку

<button type="button" class="btn btn-primary" data-toggle="collapse"
                                data-target="#view-report">
                            View response
                        </button>

поменять текст "view response" на "hide response", а при повторном нажатии вернуть "view response".

Answer 1

document.querySelector('#btn').onclick = function() { 
  if(this.innerHTML == "Hide response") 
  { 
    this.innerHTML = "View response"; 
    return; 
  } 
  else this.innerHTML = "Hide response"; 
}
<button type="button" class="btn btn-primary" data-toggle="collapse" id='btn' 
                                data-target="#view-report"> 
                            View response 
                        </button>

Answer 2

let show = true; 
function changeText(ev) { 
    if(show) { 
        ev.innerText = "Hide response" 
        show = false; 
    } 
    else { 
        ev.innerText = "View response" 
        show = true; 
    } 
}
<button type="button" class="btn btn-primary" onclick="changeText(this)" data-toggle="collapse" data-target="#view-report"> 
    View response 
</button>

Можно без доп. переменной, хранить инфу в самой кнопке.

function changeText(ev) { 
    if(ev.getAttribute('data-show') === "true") { 
        ev.innerText = "Hide response" 
        ev.setAttribute('data-show', "false");  
    } 
    else { 
        ev.innerText = "View response" 
        ev.setAttribute('data-show', "true");  
    } 
}
<button type="button" data-show="true" class="btn btn-primary" onclick="changeText(this)" data-toggle="collapse" data-target="#view-report"> 
    View response 
</button>

READ ALSO
Reply для Comment AngularJS Error 404 not found HELP

Reply для Comment AngularJS Error 404 not found HELP

у меня есть проблема: -Вывожу комментарии на страницу и их children элементы-Получаю id данного комментария

168
Несколько форм с файлами ajax

Несколько форм с файлами ajax

Что не так? почему не отправляется? пробовал before send подсвечивать незаполненные поля красным, в итоге просто сообщение об успешной отправке...

143
Как скрыть форму ajax? [закрыт]

Как скрыть форму ajax? [закрыт]

Использую этот плагин https://jqueryvalidationorg/

152
Не работает slick слайдер

Не работает slick слайдер

Все сделал как в документации, но он почему то не работаетПричем вроде как подключился, но криво

148