Hiding a div from a Chatbox

Question

so basically the concept is, whenever user type any message and press enter key his message will appear in a chatbox, but problem is,empty message (having only spacebars>1) is also appearing in a box. how can i hide a div having only spacebars.

here is the code

var message = document.getElementById("tarea");

var textbox = document.getElementById("box");
message.addEventListener("click", nayaText);
message.addEventListener("keyup", textSend);

function nayaText() {
    if (message.value != " ") {
        let naya = document.createElement("div");
        naya.style.width = "100px";
        naya.style.height = "30px";
        naya.style.border = "1px solid rgb(255, 153, 0)";
        naya.style.marginTop = "4px";
        naya.innerHTML = message.value;
        textbox.appendChild(naya);
        message.value = " ";
    }
    if (!message.trim().length) {
        naya.style.display = "none";
        message.value = " ";
    }


}


function textSend() {

    if (event.keyCode === 13) {
        event.preventDefault();
        message.click();
    }
}

HTML part

<div class="card">
<div class="card-header bg-warning">
   <img id="profilep" class="rounded-circle" src="as.jpg">
   <div id="info">
      <label id="uname">Suraj Surya</label><br>
      <label id="lastseen">12:00am</label>
   </div>
</div>
<div class="card-body ">
   <div class="box" id="box"></div>
</div>
<div class="card-footer">
   <span><i id="paisa" class="fas fa-rupee-sign"></i></span>
   <span><input type="text" placeholder="type here..." id="tarea" required  ></input></span>
   <span><i id="more" class="fas fa-chevron-up"></i></span>
</div>

Answer 1

It must be the

if(message.value!=" ")

part. I would trim the message and compare it with empty string.

if((message.value.trim())!=="")