gpt4 book ai didi

javascript - 如何将 onclick 事件链接到外部 JavaScript 函数?

转载 作者:行者123 更新时间:2023-11-28 05:02:18 25 4
gpt4 key购买 nike

我将 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文件

//使用正确的文件名引用。我刚刚以 new 为例。

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 时必须确定。我已连接到我的localhostApache server 配置

定义套接字的标准方法是这样的:

    var socket = io.connect('http://localhost:8090');
//io is a global variable and hence no need to define it.

请注意,我们还定义了端口号。 8090仅作为示例

关于javascript - 如何将 onclick 事件链接到外部 JavaScript 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42048778/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com