Alterando a cor de fundo dos botões html para frente e para trás após cliques - javascript, html

Sou novo em JavaScipt e HTML e só preciso disso como um problema secundário. Tenho alguns botões e quero que sua cor de fundo mude depois de clicados. Isso poderia resolver parcialmente com:

<input class="choice" onclick="this.style.background="blue";" type="submit" value="V" id="0" />

No entanto, quando o botão for clicado pela segunda vez, ele deve mudar novamente. De preferência, seria uma instrução de uma linha como acima. Agradeceria qualquer ajuda.

Respostas:

Eu quebrei seu código em JS separado, é mais limpo e fácil de manter.

Se você desabilitar o botão, ele deixará de receber eventos de clique. Presumo que não seja isso que você deseja.

Aqui, eu fiz isso de forma que, quando o botão for clicado, ele alterne a cor de fundo entre vermelho e azul.

http://jsbin.com/huqoyixuhe/edit?html,css,js,output

// select the button
var input = document.querySelector("input.choice");
// add a click event listener
input.addEventListener("click", function () {
// if the button is red, make it blue
if (this.style.background === "red") {
this.style.background = "blue";
}
// otherwise, it is already blue, so make it red!
else {
this.style.background = "red";
}


});

EDITAR

aqui, como uma linha: http://jsbin.com/bolowuceqa/edit?html,output

<input class="choice" onclick="this.style.background==="red" ? this.style.background = "blue" : this.style.background = "red"" style="background:red;" type="submit" value="V" id="0" />