[英]How do I link my onclick event to an external javascript function?
我将我的JavaScript链接到我的HTML文件,因此我不确定为什么单击此按钮时未调用函数setUser
。
<!DOCTYPE html>
<html>
<head>
<title>Chat Demo</title>
<link type="text/css" rel="stylesheet" href="client_style.css"/>
</head>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<body>
<h1 class = "text"> THE LEMON LAW </h1>
<div id="error-container" ></div>
<div style="text-align:center">
<ul style="list-style-type: none;" >
<li><input id="name" type="text" name="name" value="" placeholder="Enter your Name!" ></li>
<li><input id="age" type="text" name="age" value="" placeholder="Enter your Age!" ></li>
<li><input id="gender" type="text" name="gender" value="" placeholder="Enter your Gender!" ></li>
</ul>
<button type="button" name="button" onclick="setUser()">Start chating!</button>
</div>
<script type="text/javascript" src="/public/chat.js"></script>
</body>
</html>
这是我在javascript文件中的功能
function setUser(){ // set username event listener
name = document.getElementById('name').value;
age = document.getElementById('age').value;
gender = document.getElementById('gender').value;
//send user name to server
socket.emit('setUser', {name:name , age:age, gender:gender});
};
问题是您没有在客户端代码中定义socket
。
试试吧。
html文件
//请注意,我使用了socket.io
和jquery
在线路径。 您不需要使用它们。 您可以继续使用自己的<script>
参考
<!DOCTYPE html>
<html>
<head>
<title>Chat Demo</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="new.js"></script>
</head>
<body>
<h1 class = "text"> THE LEMON LAW </h1>
<div id="error-container" ></div>
<div style="text-align:center">
<ul style="list-style-type: none;" >
<li><input id="name" type="text" name="name" value="" placeholder="Enter your Name!" ></li>
<li><input id="age" type="text" name="age" value="" placeholder="Enter your Age!" ></li>
<li><input id="gender" type="text" name="gender" value="" placeholder="Enter your Gender!" ></li>
</ul>
<button type="button" name="button" onclick="setUser()">Start chating!</button>
</div>
</body>
</html>
new.js文件
//使用正确的文件名参考。 我刚用新的例子。
function setUser(){ // set username event listener
name = document.getElementById('name').value;
age = document.getElementById('age').value;
gender = document.getElementById('gender').value;
var socket = io.connect('http://localhost');
socket.emit('setUser', {name:name , age:age, gender:gender}); //send user name to server
console.log("setUser Called"); //to check if it's calling this function. Just used to show you.
};
调用该函数,套接字尝试连接到主机。 在定义socket
你必须确定。 我已连接到Apache server
配置的localhost
定义套接字的标准方法是:
var socket = io.connect('http://localhost:8090');
//io is a global variable and hence no need to define it.
这里注意我们还定义了端口号。 8090
仅用作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.