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.