Hover Effects Disabled when "Span" is Modified with JavaScript

Question

I have a text field, and there is a max-character counter (not using the maxlength in my HTML). Here's how it works: it starts at 500 characters, and as you type, the number will decrease. The counter is below the text field. When it gets to 0, it will go into the negatives, and JavaScript turns it red.

Here's the catch: I have a "Send" button (to send the message), and in my CSS, on hover, it will change the background color to be slightly darker. When you do go below 0 with the max-character count, I make JavaScript change the background color of the "Send" button to be grey. When you delete characters and eventually get your character-count out of the negatives, I want the button to appear normal again. However, when I hover over the "Send" button after it gets changed back to normal, the background doesn't get darker (but will turn grey when I go back into the negatives).

Here's my HTML and JavaScript code (and I'm assuming the CSS code is already predictable):

<form><textarea class="areas" id="type_area" placeholder="Chat..." onkeyup="charsLeft()" onkeydown="charsLeft()"></textarea></form>
    <div id="char_count">
        <span id="charsLeftH" title="Characters Remaining" style="cursor: pointer">500</span>
    </div>
    <input type="button" value="Send" id="submit">
        <script>
            var chars = 500;

            function charsLeft() {
                chars = 500 - $("#type_area").val().length;
                document.getElementById("charsLeftH").innerHTML=chars;
                if (chars < 50 && chars > 0) {
                    document.getElementById("charsLeftH").style.color="#9A9A00";
                } else if (chars < 1) {
                    document.getElementById("charsLeftH").style.color="#BD2031";
                } else {
                    document.getElementById("charsLeftH").style.color="#000000";
                }
            };
        </script>

Edit: I'm trying to replicate Twitter's "compose a tweet" box if this didn't seem similar enough. :)

Answer 1

The removeAttribute("style") did not work. But I found a solution!

        <div id="char_count">
            <span id="charsLeftH" title="Characters Remaining" style="cursor: pointer">500</span>
        </div>
        <input type="button" value="Send" id="submit">
        <script>
            var chars = 500;

            function charsLeft() {
                chars = 500 - $("#type_area").val().length;
                document.getElementById("charsLeftH").innerHTML=chars;
                if (chars < 50 && chars > 0) {
                    document.getElementById("charsLeftH").style.color="#9A9A00";
                    document.getElementById("submitX").id="submit";
                } else if (chars < 1) {
                    document.getElementById("charsLeftH").style.color="#BD2031";
                    if (chars < 0) {document.getElementById("submit").id="submitX";}
                } else {
                    document.getElementById("charsLeftH").style.color="#000000";
                    document.getElementById("submitX").id="submit";
                }
            };

            charsLeft();
        </script>

I changed the ID of the button, and in my CSS, I added another style for another ID (#submitX) with a grey background. When it gets out of the negatives, it will change the new submit button (#submitX) to #submit and then it repeats when it goes back in the negatives.

Answer 2

The JavaScript puts the styling inside the style attribute of the element, which generally overrides the CSS.

The best solution would be to remove the style attribute instead of specifying the 'normal' color:

if (chars < 500 && chars > 0) {
    document.getElementById("charsLeftH").removeAttribute("style");
}