Как при нажатии кнопки изменить ее цвет и надпись на ней

У нас есть форма и кнопка, при нажатии на которую мы хотим изменить ее цвет фона и надпись кнопки.

<button> click me </button>

Есть 2 варианта сделать это, в самой кнопке, что не есть красиво, или в отдельном разделе <script>

1 вариант выглядит так:

<button id="ff" onclick = "this.textContent='fff'; this.style.backgroundColor = 'white';"> click me </button>

Мы кнопке назначаем событие onclick и если оно случается выполняется js код, который меняет цвет фона и подпись кнопки.

2 вариант:

Мы назначаем кнопке id: <button id="ff"> click me </button>
и ниже пишем код:

<script>
window.onload = function(){
	var x = document.getElementById("ff");
	x.onclick = function() {
		x.textContent="WAIT";
		x.style.backgroundColor = 'white';
	}
}
</script>

Кода получилось больше, но так его легче обрабатывать, если файл большой, то код js находится в одном месте и не нужно искать кнопку в html файле. Также можно полностью скрыть кнопку, чтобы пользователь не нажимал ее второй раз.