JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript: void(0);" class="bg_swap" data-index="0">Red</a> 
<a href="javascript: void(0);" class="bg_swap" data-index="1">Black</a> 
<a href="javascript: void(0);" class="bg_swap" data-index="2">Yellow</a>
<a href="javascript: void(0);" class="bg_swap" data-index="3">None</a>

CSS

.bg_swap {
    background-color: Calibri;
    font-size: 15px;
}
a { text-decoration: none; }
a:hover { text-decoration: none; }
a:visited { text-decoration: none; }

JavaScript

var backImage = [
    "http://alm7.wikispaces.com/file/view/RedBackground.bmp/144018347/RedBackground.bmp",
    "http://www.time2man-up.com/wp-content/uploads/2011/07/black-background.jpg",
    "http://1.bp.blogspot.com/--GorNQoEUxg/TfWPyckVeMI/AAAAAAAAAHk/0208KqQf3ds/s1600/yellow_background.jpg",
    ""
    ];

function changeBGImage(whichImage) {
    if (document.body) {
        document.body.style.background = "url(\"" + backImage[whichImage] + "\")";
    }
}
var buttons = document.querySelectorAll('.bg_swap'),
    button;

for (var i = 0; i < buttons.length; i++) {
    button = buttons[i];
    button.onclick = function() {
        changeBGImage(this.dataset.index);
    };
}