javascript - 如果一个变量大于或等于另一个变量，如何更改文本颜色？

Question

我正在编写一个小脚本，根据在文本框中键入时剩余的可用字符值来更改某些跨度文本的颜色。

我有显示剩余字符数的计数器，但当剩余字符数大于或等于允许的最大字符数时，我似乎无法更改颜色。

这是我的 javascript 代码:

 $(document).ready(function(){

  var maxChar = 300;

  $("textarea").keyup(function() {
    var length = $(this).val().length;
    var charCount = maxChar - length;
    $("#charCount").text(charCount);
    if (charCount >= maxChar) {
      document.getElementById("charCount").style.color = "#ff3343";
    }
  })

});

文本框的 HTML:

<div class="form-group col-12">
  <label for="hostDesc">Description</label>
   <textarea class="form-control" name="hostDesc" id="hostDesc" min="0" maxlength="300" data-ng-model="hostDesc" aria-describedby="descHelp" placeholder="Leave a description" rows="8" style="height: 150px" required></textarea>

     <p class="text-small text-muted mb-0"><span id="charCount">300</span> characters remaining</p>

</div>

Answer 1

你有 >= 错误的方式:

$(document).ready(function() {
  var maxChar = 300;
  $("textarea").keyup(function() {
    var length = $(this).val().length;
    var charCount = maxChar - length;
    $("#charCount").text(charCount);
    if (charCount <= maxChar) {
      document.getElementById("charCount").style.color = "#ff3343";
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-12">
  <label for="hostDesc">Description</label>
  <textarea class="form-control" name="hostDesc" id="hostDesc" min="0" maxlength="300" data-ng-model="hostDesc" aria-describedby="descHelp" placeholder="Leave a description" rows="8" style="height: 150px" required></textarea>

  <p class="text-small text-muted mb-0"><span id="charCount">300</span> characters remaining</p>

</div>

希望对您有所帮助，