Question: I have an textarea on a webpage, and I want to have a border around it when the string is empty. But it only works if I put something into the text and then delete it again. How can I make the border visible before I write in the textarea? Here is the code:

```
$("#message-box").on("keyup", function(){
    var charCount = $("#message-box").val().length;
    console.log("charCount");
    $("#char-count").html(charCount);

    if (charCount === "") {
      $("#message-box").css("border", "10px solid red");
    }else{
      $("#message-box").css("border", "");
          //event listener
      $("#submitbutton").on('click', function() {
        var comment = $("#message-box").val();
        $("#visible-comment").html(comment);
        $("#message-box").hide();

        console.log(comment);
        return false;
      });
    };
};

```

Answer: 
Please check you have some syntax errors. 

`$("#message-box").on(` this section is not closed with `);`

Also seperate the event `$("#submitbutton").on('click', function()` 

also `charCount = $("#message-box").val().length;` will return a number even if the text area is empty it give `0`. so you need to check it as

`if (charCount==0)`

So your final code become 

```
$("#message-box").on("keyup", function(){
    var charCount = $("#message-box").val().length;
    console.log("charCount");
    $("#char-count").html(charCount);

    if (charCount==0) {
      $("#message-box").css("border", "10px solid red");
    }else{
      $("#message-box").css("border", "");
          //event listener
    };
});

$("#submitbutton").on('click', function() {
var comment = $("#message-box").val();
$("#visible-comment").html(comment);
$("#message-box").hide();

console.log(comment);
return false;
});

```

<https://jsfiddle.net/tintucraju/08dp6ra5/2/>
```js
function checkCharCount(){
  charCount = $("#message-box").val().length;
  $("#char-count").html(charCount);
  if (charCount === "") {
    $("#message-box").css("border", "10px solid red");
  }else{
    $("#message-box").css("border", "");
  }
}

$("#message-box").on("keyup", function(){
    checkCharCount();
});

$("#submitbutton").on('click', function() {
    var comment = $("#message-box").val();
    $("#visible-comment").html(comment);
    $("#message-box").hide();
    console.log(comment);
    return false;
});

checkCharCount();
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message-box"></textarea>
<span id="char-count"></span>
```

You are defining your borders within the "keyup" event listener, which is why it works only after you enter/delete characters. Making the charcheck into a function allows you to avoid repetitions.

In addition there was a few typos.