JSFiddle - React, Tailwind, and code Playground

by cristian_cena

HTML

<input type="button" id="c1" class="c" value="red">
<input type="button" id="c2" class="c" value="blue">
<input type="button" id="c3" class="c" value="pink">
<input type="button" id="c4" class="c" value="orange">
<hr/>
<a href="http://www.librosweb.es/javascript/" target="_blank">manual de javascript</a> | 
<a href="http://www.desarrolloweb.com/manuales/manual-jquery.html" target="_blank">manual de jquery</a>

JavaScript

/*
** CON JAVASCRIPT
*/

//definicion de la funcion
function cambiaColor(elem) {
    elem.style.backgroundColor = elem.value;
}

//asignación de la función al evento onclick de los elementos.
document.getElementById("c4").onclick = function(){
    cambiaColor(this);
}

/*
** + JQUERY. Facilita la seleccion de elementos y manipulacion del dom en general.
*/
    
$("#c1").click(function(){
    $(".c").css({"background":$(this).val(), "color":"white"});
});

$("#c2").click(function(){
    $(this).css({"background":$(this).val()});
});