Как скрывать и показывать кнопку по клику?

Question

[DimaPolishuk]

При загрузке странице есть кнопка "Start"
При клике на кнопку "Start" она должна заменяться на кнопку "Stop"
и наоборот
Как это можно реализовать с помощью JS или Angular?

Comments

[DimaPolishuk]

<button class="btn btn-start" ng-click="start()">Start</button>
            <button class="btn btn-stop"  ng-click="stop()">Stop</button>

при нажатии на старт срабатывает одна функция, при нажатии на стоп другая

Answer 1

[gleendo]

Рабочий пример - https://jsfiddle.net/evg_/sn1akyhz/1/

var btn = document.querySelector(".btn")
		isStart = false;

btn.addEventListener("click", function() {
	if (isStart) {
		btn.classList.remove("modifier");
		btn.textContent = "Старт";
		isStart = false;
		stop();
		return;
	};
	
	btn.classList.add("modifier");
	btn.textContent = "Стоп";
	isStart = true;
	start();
});

function start() {
	console.log("start");
}

function stop() {
	console.log("stop");
}

Comments

[Владислав Поляков]

Вы не меняете кнопки , или ею функцию ...

[gleendo]

Владислав Поляков: Как раз таки тут и происходит некая смена кнопок. Теперь просто можно добавить любые функции в обработчик и все. Это уже дело ТС...

[Владислав Поляков]

evg_: Мой пример рабочий, а ваш просто визуальный, кнопка одна и таже.

[gleendo]

Владислав Поляков: А мой пример не рабочий да?)
Вот зачем менять кнопки, хотя по сути у вас это тоже одна и та же кнопка, просто классы меняются*.
Просто вешаем обработчик и смотрим на состояние кнопки. Если одно, вызываем одну функцию, если другое, другую.

PS. Ваш пример не рабочий:)

Answer 2

[Андрей Федоров]

А точно js надо?
codepen.io/aliencash/pen/ZOoBQX

Answer 3

[iNeedHelp]

<button id='start' value='Start'></button>

let elem = document.querySelector('#start');
elem.addEventListener('click', () => {
 elem.value = 'Stop';
 elem.backgroundColor = 'red';
});

Comments

[Владислав Поляков]

Вы меняете содержимое кнопки , но не ее саму , или ее функцию .

Answer 4

[Владислав Поляков]

Пример
Подключить jquery

var btn = $('#btn');
btn.on('click',function(){
	btn.hasClass('green') ? red(btn) : green(btn);
});
function green(el){
	el.removeClass();
  el.addClass('green');	
}
function red(el){
	el.removeClass();
  el.addClass('red');
}
$('.green').on('click', function(){
//Some Function
});
$('.red').on('click', function(){
//Some Function
});