Databases
StackOverflow2013
Postsdbo
POHover Effects Disabled when "Span" is Modified with JavaScript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHover Effects Disabled when "Span" is Modified with JavaScript
    text
    copied!<p>I have a text field, and there is a max-character counter (not using the <code>maxlength</code> 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.</p> <p>Here's the catch: I have a "Send" button (to send the message), and in my CSS, on <code>hover</code>, 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).</p> <p>Here's my HTML and JavaScript code (and I'm assuming the CSS code is already predictable):</p> <pre><code>&lt;form&gt;&lt;textarea class="areas" id="type_area" placeholder="Chat..." onkeyup="charsLeft()" onkeydown="charsLeft()"&gt;&lt;/textarea&gt;&lt;/form&gt; &lt;div id="char_count"&gt; &lt;span id="charsLeftH" title="Characters Remaining" style="cursor: pointer"&gt;500&lt;/span&gt; &lt;/div&gt; &lt;input type="button" value="Send" id="submit"&gt; &lt;script&gt; var chars = 500; function charsLeft() { chars = 500 - $("#type_area").val().length; document.getElementById("charsLeftH").innerHTML=chars; if (chars &lt; 50 &amp;&amp; chars &gt; 0) { document.getElementById("charsLeftH").style.color="#9A9A00"; } else if (chars &lt; 1) { document.getElementById("charsLeftH").style.color="#BD2031"; } else { document.getElementById("charsLeftH").style.color="#000000"; } }; &lt;/script&gt; </code></pre> <p><strong>Edit:</strong> I'm trying to replicate Twitter's "compose a tweet" box if this didn't seem similar enough. :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload