JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<div id="firstDiv" style="width: 100px; height: 100px;"></div>
<div id="secondDiv" style="width: 100px; height: 100px;"></div>
<button>Clear Background</button>

CSS

div {
    border: solid 1px black;
    margin: 3px;
}

JavaScript

//Change background image onClick - Alexander Dixon 08-05-2015
//http://stackoverflow.com/questions/31845369/how-do-i-change-an-css-background-image-dynamically

var $pictureOne = "url(http://i.imgur.com/5iZzmT7.png)", $pictureTwo = "url(http://i.imgur.com/pP4HJU0.gif)";

var BgChange = function changeBg(){
    $('div#firstDiv').on('click', function (){
        $(this).css("background-image", $pictureOne);});
    $('div#secondDiv').on('click', function (){
        $(this).css("background-image", $pictureTwo).css("border", "solid 2px blue");});
};

var BgReset = function clearBg() {
    $('div#firstDiv').css("background-image", "");
    $('div#secondDiv').css("background-image", "").css("border", "solid 1px black");
};

BgChange();

$('button').on('click', function (){
    BgReset();
});