Jak wywołać więcej niż jedno zdarzenie onClick dla jednego elementu?

Witam. Mam "chyba" proste pytanie jednak kombinuję i nie mogę tego zrobić. A mianowicie robiliśmy na lekcji, żeby przycisk po najechaniu na niego kursorem zmieniał kolor, a po zjechaniu kursora, żeby wracał do swojego domyślnego koloru. Zrobiłem po prostu dwie funkcje. Jedną onMouseOver a drugą onMouseOut i potem getElementById.style.backgroundColor ="color" no i śmigało elegancko, jednak chciałem zrobić, żeby kolor zmieniał się po kliknięciu na przycisk, a po ponownym kliknięciu, żeby wracał do domyślnego. Jednak nie mogę zrobić dwa onClick do jednego przycisku bo wtedy po prostu drugiego mi nie widzi. I stąd moje pytanie jak zrobić, żeby po kliknięciu na przycisk zmieniał on kolor, a po ponownym kliknięciu zmienił go na inny itd. Żeby było więcej niż jedno zdarzenie onClick dla jednego przycisku i czy to w ogóle możliwe?

Mój aktualny skrypt:

<button id="button" onclick="funkcja1()"> Click </button>
<script type="text/javascript">

	function funkcja1(){
	document.getElementById("button").style.backgroundColor = "red";
	}

</script>

Możesz sobie wrzucić dwie różne funkcje do jednego onclick.

<button id="button" onclick="funkcja1(); funkcja2();"> Click </button>

Możesz też zrobić tak:

document.getElementById("button").addEventListener("click", funkcja1, false);
document.getElementById("button").addEventListener("click", funkcja2, false);

No ale chyba tobie wystarczy tylko jedna funkcja. Jedno nasłuchiwanie eventu onclick, który jest przypisany do funkcji. Następnie w samej funkcji sprawdzasz jaki dany element ma aktualnie kolor i po kliknięciu przełączasz na ten drugi.
Coś takiego:

function funkcja1() {
	const button = document.getElementById('button');
  if (button.style.backgroundColor === 'red') {
  	button.style.backgroundColor = 'blue';
  } else {
  	button.style.backgroundColor = 'red';
  }
}

Live demo:
https://jsfiddle.net/8bezo6w1/

A tu masz jak takie rzeczy powinno się robić porządnie, tak jak w książce napisali.
https://jsfiddle.net/8bezo6w1/1/

Z opisu chodzi o jakieś toggle:

<button id="button" onclick="funkcja1()"> Click </button>
<script type="text/javascript">
	var toggle = true;
    function funkcja1(){
		document.getElementById("button").style.backgroundColor = toggle? "red": "buttonface";
		toggle = !toggle;
    }
</script>

albo "zabawy" z EventListener'ami:

<button id="button" onclick="funkcja1()"> Click </button>
<script type="text/javascript">
	const b = document.getElementById("button");
	b.addEventListener("click", funkcja1);
	
    function funkcja1(){
		b.style.backgroundColor = "red";
		b.removeEventListener("click", funkcja1);
		b.addEventListener("click", funkcja2);
    }
    function funkcja2(){
		b.style.backgroundColor = "buttonface";
		b.removeEventListener("click", funkcja2);
		b.addEventListener("click", funkcja1);
    }
</script>

W tym drugim przykładzie onclick="funkcja1()" i linia 4 właściwie robią to samo więc jedno z nich można usunąć.

m31 napisał(a):

No ale chyba tobie wystarczy tylko jedna funkcja. Jedno nasłuchiwanie eventu onclick, który jest przypisany do funkcji. Następnie w samej funkcji sprawdzasz jaki dany element ma aktualnie kolor i po kliknięciu przełączasz na ten drugi.
Coś takiego:

function funkcja1() {
	const button = document.getElementById('button');
  if (button.style.backgroundColor === 'red') {
  	button.style.backgroundColor = 'blue';
  } else {
  	button.style.backgroundColor = 'red';
  }
}

Live demo:
https://jsfiddle.net/8bezo6w1/

A tu masz jak takie rzeczy powinno się robić porządnie, tak jak w książce napisali.
https://jsfiddle.net/8bezo6w1/1/

Dzięki. To działa dokładnie tak jak chciałem, ale co w przypadku gdybym chciał, żeby kolorów było 3 lub więcej i za każdym kliknięciem zmieniał się na kolejny?

Karol Basek napisał(a):

Dzięki. To działa dokładnie tak jak chciałem, ale co w przypadku gdybym chciał, żeby kolorów było 3 lub więcej i za każdym kliknięciem zmieniał się na kolejny?

1. Robisz licznik kliknięć
2. Robisz tablicę z kolejnymi kolorami
3. Wywołujesz tablica[counter++ % ilość_kolorów]

Karol Basek napisał(a):

Dzięki. To działa dokładnie tak jak chciałem, ale co w przypadku gdybym chciał, żeby kolorów było 3 lub więcej i za każdym kliknięciem zmieniał się na kolejny?

Coś takiego:

const button = document.getElementById('button');
const colors = ['red', 'blue', 'yellow', 'green', 'pink', 'tomato', 'white', 'grey'];
let index = 1

function handleClick() {
  button.style.backgroundColor = colors[index];
  index += 1;
  if (index > colors.length - 1) {
  	index = 0;
  }
}

button.addEventListener('click', handleClick);

https://jsfiddle.net/dpk1ytm0/1/