 <p>Although, moving the code to change colour inside the event handler will work, I'd suggest to use <a href="https://developer.mozilla.org/en/docs/Web/API/Element/classList" rel="nofollow"><code>classList</code></a> API.</p> <p><a href="http://jsfiddle.net/tusharj/soukgsfw/" rel="nofollow"><strong>Updated Fiddle</strong></a></p> <p>Create a CSS class to set the background color to blue and toggle this class when the box is clicked.</p> <p><code>classList.toggle('className')</code> will add the class if it is not already added on the element otherwise it'll remove the class.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("box").addEventListener("click", function() { document.getElementById('circle').classList.toggle('blue'); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>#box { width: 50px; height: 50px; position: absolute; bottom: 0; right: 0; background-color: red; } #circle { width: 50px; height: 50px; background: orange; border-radius: 50px; position: absolute; top: 50%; left: 50%; } #circle.blue { background: blue; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;&lt;/div&gt; &lt;div id="circle"&gt;&lt;/div&gt;</code></pre> </div> </div> </p>