JavaScript / Socket.io web application not executing any JS commands

Question

I am trying to create a simple live LAN messaging web application. I am using HTML, CSS, Javascript, Socket.io, and JQuery to do this. I have built a similar application to this before, so I have some experience with these types of projects. I have no idea why, but every time I try to execute any javascript command, it doesn't work. I have a button trying to start a function called joingame(). It says that the function is undefined. I also tried to define a variable as "test value", and it keeps coming up as ''. If anybody could help me out, it would be great! It's probably something really basic, but I can't figure it out. Thank you!

<!DOCTYPE HTML>
<html>

<head>
<style>
#start {
width: 400px;
height: 120px;
border: 1px solid black;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}

#chat {
width: 80%;
height: 80%;
border: 1px solid black;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
</style>
</head>

<body>
<div id="start">
<center>
<h2>Enter your username below:</h2>
<input type="text" placeholder="Username here..." id="usernameid" />
<input type="button" value="Submit" onclick="joingame()" >
</center>
</div>

<div id="chat" style="display: none;">
<center>
<div id="chatbox">
<div id="inputarea">
<textarea id="chatinp" placeholder="Enter message here..." cols='50' rows='2' />
<input type="button" value="Send" onclick="sendchat()" id="sendbut" />
</div>
</div>
</center>
</div>
<script src="socket.io.js"></script>
<script src="jquery-3.2.0.js"></script>
<script type='text/javascript'>
var socket = io();
var usernameasdf = "test value";

function joingame() {
usernameasdf = document.getElementById("usernameid").value;
socket.emit('player', usernameasdf);
document.getElementById("start").style.display = "none";
document.getElementById("chat").style.display = "inline";
}

socket.on('player', function(name) {
alert(name);
});

function sendchat() {
alert("chat sent");
}
</script>
</body>
</html>

Do you get any errors in the console on page load? specifically regarding the two libraries you rely on (io and jquery - why load jquery if you are not using jquery by the way) - also, that code is obviously incomplete, right, you aren't showing the details of connecting the socket to something — Jaromanda X
– Jaromanda X, Commented Mar 30, 2017 at 2:19
try moving those script with src blocks into head, and your script block to the top of the body tag — Jaromanda X
– Jaromanda X, Commented Mar 30, 2017 at 2:29
@JaromandaX, No there are not any errors coming up about the libraries not loading. And I am in the beginning stages of this project, so I will need JQuery shortly. And the way it's hosted, it does not need to create a connection with the Socket.io server in the coding. I can confirm that it does have a successful live connection to the server. — Sam D.
– Sam D., Commented Mar 30, 2017 at 2:34
I think the issue is in this line <textarea id="chatinp" placeholder="Enter message here..." cols='50' rows='2' />. When I changed closing tag, it worked for me in firefox as <textarea id="chatinp" placeholder="Enter message here..." cols='50' rows='2'></textarea> — Pratik Gaikwad
– Pratik Gaikwad, Commented Mar 30, 2017 at 2:35

Community · Accepted Answer · 2017-05-23 10:30:57Z

1

Textare isn't self closing. Check this SO answer When I changed closing tag, it worked for me in firefox as <textarea id="chatinp" placeholder="Enter message here..." cols='50' rows='2'></textarea>

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Mar 30, 2017 at 2:40

Pratik Gaikwad

1,5662 gold badges22 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam D. Over a year ago

Yep that was the problem. I don't know why I thought that it was self closing when I wrote it. Thank you so much for helping!

Collectives™ on Stack Overflow

JavaScript / Socket.io web application not executing any JS commands

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related