Changer la couleur d'arrière-plan des boutons html en avant et en arrière après les clics - javascript, html

Je suis nouveau sur JavaScipt et HTML et je n'en ai besoin que comme problème secondaire. J'ai quelques boutons et je veux que leur couleur d'arrière-plan change après avoir cliqué. Que je pourrais résoudre en partie avec:

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

Cependant, lorsque le bouton est cliqué une deuxième fois, il devrait revenir en arrière. De préférence serait une déclaration d'une ligne comme ci-dessus. J'apprécierais toute aide.

Réponses:

J'ai éclaté votre code en JS séparé, il est plus propre de cette façon et plus facile à entretenir.

Si vous désactivez le bouton, il cesse de recevoir les événements de clic. Je suppose que ce n'est pas ce que vous voulez.

Ici, j'ai fait en sorte que lorsque le bouton est cliqué, il permute la couleur d'arrière-plan entre le rouge et le bleu.

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";
}


});

MODIFIER

ici, en une ligne: 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" />