Change text on hover not working
<p>I have a button to select images, it's default state is "Select Image", after an image is selected, the innerHTML of the button is changed to the filename.
Now, what I want to do, is that if I hover over the button while it does not say "Select Image", I want it to say "Select a different image", and then onmouseout I want it to go back to what it was before (the image filename).</p>

<p>I put together the following, but it's not working... I am open to JS and jQuery options.</p>

<pre><code>window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    if (btn.innerHTML !== "Select Image") {
        var temp = btn.innerHTML;
        btn.onmouseover = btn.innerHTML = "Select a different image";
        btn.onmouseout = btn.innerHTML = temp;
    }
});
</code></pre>

<p><strong>SOLUTION</strong> -- thanks to Ian</p>

<pre><code>window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    btn.onmouseover = function () {
        if (this.innerHTML !== "Select Image") {
            var temp = this.innerHTML;
            this.innerHTML = "Select a different image";
        }
    };

    btn.onmouseout = function () {
        if (this.innerHTML !== "Select Image") {
            this.innerHTML = temp;
        }
    };
});
</code></pre>
