I am new into programming, I want to learn more with projects but I run into some problems that I can’t figure out. I got this code with a chatbox on a website, I added recently the emojionearea css and js and after this I cant send the message via ‘enter’ button and the text is not disappearing after I press ‘Send’ button. I am really stuck.
room.html
{% extends 'base.html' %} {% block content %}
<head>
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/emojionearea.min.css') }}"
/>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<!-- Include EmojiPicker.js -->
<script src="{{ url_for('static', filename='js/emojionearea.min.js') }}"></script>
</head>
<div class="message-box">
<h2>Chat Room: {{ code }}</h2>
<div class="messages" id="messages"></div>
<div class="inputs">
<input
type="text"
rows="3"
placeholder="Message"
name="message"
id="message"
/>
<!-- Emoji picker button -->
<button type="button" name="send" id="send-btn" onClick="sendMessage()">
Send
</button>
</div>
</div>
<script type="text/javascript">
var socketio = io();
function handleKeyPress(event) {
if (event.key === "Enter") {
sendMessage();
}
}
const messages = document.getElementById("messages");
const createMessage = (name, msg) => {
const content = `
<div class="text">
<span>
<strong>${name}</strong>: ${msg}
</span>
<span class="muted">
${new Date().toLocaleString()}
</div>
`;
messages.innerHTML += content;
};
socketio.on("message", (data) => {
createMessage(data.name, data.message);
});
const sendMessage = () => {
console.log("send");
const message = document.getElementById("message");
if (message.value == "") return;
socketio.emit("message", { data: message.value });
message.value = "";
};
$(document).ready(function () {
$("#message").emojioneArea({
pickerPosition: "bottom",
});
});
</script>
{% for msg in messages %}
<script type="text/javascript">
createMessage("{{ msg.name }}", "{{ msg.message }}");
</script>
{% endfor %} {% endblock %}
i tried everything with chatgpt, not working, I cant find bugs with the site console on F12.I think maybe there is a problem with the emoji script that is not configured correctly for my chatroom.
New contributor
PoWerKinG01 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.