0

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>
Sam D.
  • 57
  • 9
  • 1
    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 Mar 30 '17 at 02:19
  • 1
    try moving those script with src blocks into head, and your script block to the top of the body tag – Jaromanda X Mar 30 '17 at 02: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. Mar 30 '17 at 02:34
  • 1
    I think the issue is in this line ``. When I changed closing tag, it worked for me in firefox as `` – Pratik Gaikwad Mar 30 '17 at 02:35
  • @JaromandaX, I also tried to put the two source tags in the head and the actual script tag in the body, and it made no difference. That was a good idea though! – Sam D. Mar 30 '17 at 02:35
  • 1
    Cool. Try moving scripts as suggested – Jaromanda X Mar 30 '17 at 02:35

1 Answers1

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>

Community
  • 1
  • 1
Pratik Gaikwad
  • 1,526
  • 2
  • 21
  • 44
  • 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! – Sam D. Mar 30 '17 at 02:41