Why is my div not updating when changing its class with JavaScript?
<p>I currently have a <code>div</code> that's used to display and image via CSS.</p>

<p><em>For example:</em></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="myDiv" class="play"&gt;&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.play{background: url('../img/playIcon_black.png') no-repeat;}
</code></pre>

<p>This image appears as it should.</p>

<p>What I'm attempted to do is to change the image by changing the class (via JavaScript).</p>

<p><em>Example:</em></p>

<p><strong>CSS</strong></p>

<pre><code>.pause{background: url('../img/pauseIcon_black.png') no-repeat;}
</code></pre>

<p><strong>JavaScript</strong></p>

<pre><code>function myFunction() {
    myDiv.className = "pause";
}
</code></pre>

<p>When I call <code>myFunction()</code> everything seems to work correctly with one exception. Occasionally the image does not update in the browser.</p>

<p>A few things to note:</p>

<ul>
<li>I'm certain the function is being called correctly. If I put a <code>console.log()</code> statement within the function, it prints when it should. Additionally, if I inspect the element within the browser, the class is in fact changed to <code>.pause</code></li>
<li>The image changes from the "play icon" to blank once the function is called, BUT upon hovering over the <code>div</code> the images then appears permanently.</li>
<li>This only seems to happen once the page is initially loaded. Meaning, I can only recreate the issue once upon refresh, then everything works correctly after that.</li>
<li>I have attempted to clear my cache but nothing seems to have changed.</li>
<li>(I'm not sure how relevant this is) I'm calling <code>myFunction()</code> via <code>onended</code> attribute of an <code>audio</code> tag.</li>
</ul>

<p><em>For example:</em></p>

<pre><code>&lt;audio onended="myFunction()"&gt;&lt;/audio&gt;
</code></pre>

<p>But I'm not certain if this would affect anything because the function appears to be called correctly.</p>

<p><strong>Any ideas of why this might be happening?</strong></p>