简体   繁体   中英

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

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>

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM