Olá,
Separei minha solução em alguns passos simples, para que possa entender melhor.
1 - Utilizar o atributo "onclick" no botão para que chame a função "trocaCor()" ao ser clicado.
2 - Dentro da função, primeiro deve-se pegar o elemento que deseja alterar o estilo. no caso utilizei o "querySelector", e selecionei pelo ID. Ficando "document.querySelector("#cor")". Atribuí à variável "button"
3 - Após pegar o atributo, criei uma lógica com if-else para que a função identifique qual cor está setada, e troque-a. No caso, criei uma variável fora da função (se criar dentro da função, toda vez que for chamada, irá atribuir novamente o valor inicial, quebrando a lógica) e atribuí um valor booleano para ela, iniciando com "true"(nome da variável: alternaCor).
4- Em seguida, utilizei as propriedades ".style" e ".backgroundColor" para alterar a cor de fundo do elemento selecionado no passo 2. Ficando "button.style.backgroundColor = '#ffbc02'
5 - Após alterar a cor de fundo, alterei a variável booleana "alternaCor" para o valor inverso, para que, no próximo clique, a cor seja alterada novamente.
OBS: Abaixo está anexo meu código, para caso tenha alguma dúvida ou queira conferir.
Espero ter ajudado!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cor {
background-color: #ffbc02;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="cor">
<button id="trocaCor" onclick='trocaCor()'>Pintar</button>
</div>
<script type="text/javascript">
let alternarCor = true
function trocaCor() {
let button = document.querySelector('#cor')
if (alternarCor) {
button.style.backgroundColor = '#ffbc02'
alternarCor = false
} else if(!alternarCor) {
button.style.backgroundColor = '#00ff15'
alternarCor = true
}
}
</script>
</body>
</html>