Jquery not appending?

Hi, I’m trying to append some text collected from an input, but I’m not sure if jquery wasn’t installed properly or if there’s something wrong with my code.

Basically, the user is supposed to enter text into an input (id is messageInput), and then the value should be stored in a variable to be appended into a individual div in the div with the id “mainArea”. It’s actually supposed to be sort of a chat function, where the mainArea is the message area and the individual div will be the message itself.

This is my code:

<div id="mainArea">
        
      </div>
      <input class="msgInput" id="messageInput" style="float:left" size="22" placeholder="Type something...">
      <button id="send" class="sendBtn">
        <span>send</span>
      </button>

In script.js I put:

document.getElementById("send").onclick = function() {
  var message = document.getElementById("messageInput").value;
  if (message == 0) {
    
  } else {
   document.getElementById("messageInput").value = "";
   alert(message);
    $("mainArea").append("<div class='textBubble'> + message + </div>")
  }
}

As for whether I installed jquery wrongly, I didn’t download anything, because I was confused how to add it to Glitch, so I just added
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in the head tag.

<script src="/script.js" defer></script>

came with the Glitch default project, so I just left it there in the head tag too.

Sorry if this is confusing and very long, and the answer is probably really obvious, I guess, but well I’m not sure what went wrong.

When you click send do you get the alert to pop up as expected? I’m trying to debug this piece by piece and I wanna make sure it is functioning at least up to that point.

PS Just noticed this is your first post, welcome to Glitch!

1 Like

If this isn’t a private project, mind posting it here so we can look at it?
Also, if you open the inspector, there’s a tab called sources where you can see everything you project is adding, and you can check if JQuery is there

1 Like

I think you might be adding the variable into the jQuery append function incorrectly.

Try changing $("mainArea").append("<div class='textBubble'> + message + </div>") to $("mainArea").append("<div class='textBubble'>" + message + "</div>")

1 Like

Thanks for the welcome^^

Also, yes. Thanks for helping though, I found a way to do it with js. Appreciate your help, but you don’t need to assist me anymore. Thanks for the previous help though!

Thanks for the tip! I’ve already found a way to do this with js, so you don’t need to help me anymore. Thanks for the help though!

Alright, cool! I’m glad you got it done :slightly_smiling_face: