Javascript 单击socket.io中具有相同值的按钮
我被这个问题困扰了这么多天，我还没有找到任何解决办法。有人能帮我解决这个问题吗。我的客户端页面中有两个按钮，如图所示，它们监听端口3000上的服务器。该按钮从html表单获取它们的值，因此不同的客户端具有不同的值。目前，我能够根据其ID单击按钮，即如果一个客户端单击ID为sq1的按钮，则具有相同ID的按钮将自动单击。 但我想要的是，当我单击值为1的按钮时，相同值的按钮将自动单击 app.jsJavascript 单击socket.io中具有相同值的按钮,javascript,node.js,npm,socket.io,real-time,Javascript,Node.js,Npm,Socket.io,Real Time,我被这个问题困扰了这么多天，我还没有找到任何解决办法。有人能帮我解决这个问题吗。我的客户端页面中有两个按钮，如图所示，它们监听端口3000上的服务器。该按钮从html表单获取它们的值，因此不同的客户端具有不同的值。目前，我能够根据其ID单击按钮，即如果一个客户端单击ID为sq1的按钮，则具有相同ID的按钮将自动单击。 但我想要的是，当我单击值为1的按钮时，相同值的按钮将自动单击 app.js const io = require('socket.io')(3000); io.on('connec
const io = require('socket.io')(3000);
io.on('connection', function (socket) {
console.log('a client has connected');
socket.on('clicked', function() {
io.emit('clicked');
});
socket.on('clicked1', function() {
io.emit('clicked1');
});
});
console.log('socket.io server started at port 3000');
<!doctype html>
<html>
<head>
<title>Testing socket.io</title>
<style>.tictac{
width:100px;height:100px;
padding: 10px;
font-weight: bold;
background:#16ed07;
color: #000000;
cursor: pointer;
border-radius: 10px;
border: 1px solid #D9D9D9;
font-size: 150%;
}
</style>
</head>
<body>
<form>
<input type="button" id="sq1" NAME="sqrone" class="tictac" onClick="onClickHandler(this)"/>
<input type="button" id="sq2" NAME="sqrtwo" class="tictac" onClick="onClickHandler(this)"/>
</form>
<h2 id="alert"> waiting...</h2>
<script type="text/javascript">
var square1 = document.getElementById("sq1");
square1.value = localStorage.getItem("sq1");
var square2 = document.getElementById("sq2");
square2.value = localStorage.getItem("sq2");
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
<script>
var socket = io("http://localhost:3000");
socket.on('connect', function() {
document.getElementById("sq1").addEventListener("click", function () {
socket.emit("clicked");
});
document.getElementById("sq2").addEventListener("click", function () {
socket.emit("clicked1");
});
});
socket.on('clicked', function() {
//if condition
console.log('clicked');
document.getElementById("alert").innerHTML = "1 clicked";
onClickHandler(sq1);
});
socket.on('clicked1', function() {
//if condition
console.log('clicked1');
document.getElementById("alert").innerHTML = "2 clicked";
onClickHandler(sq2);
});
</script>
<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>
</body>
</html>
测试socket.io
蒂克塔克先生{
宽度：100px；高度：100px；
填充：10px；
字体大小：粗体；
背景#16ed07；
颜色：#000000；
光标：指针；
边界半径：10px；
边框：1px实心#D9D9D9；
字体大小：150%；
}
等待。。。
var square1=document.getElementById（“sq1”）；
square1.value=localStorage.getItem（“sq1”）；
var square2=document.getElementById（“sq2”）；
square2.value=localStorage.getItem（“sq2”）；
变量套接字=io（“http://localhost:3000");
socket.on（'connect'，function（）{
document.getElementById（“sq1”）.addEventListener（“单击”，函数）（）{
socket.emit（“单击”）；
});
document.getElementById（“sq2”）.addEventListener（“单击”，函数）（）{
socket.emit（“clicked1”）；
});
});
socket.on（'clicked'，function（）{
//如果条件
console.log（'clicked'）；
document.getElementById（“警报”）.innerHTML=“1已单击”；
onClickHandler（sq1）；
});
socket.on（'clicked1'，function（）{
//如果条件
console.log（'clicked1'）；
document.getElementById（“警报”）.innerHTML=“2已单击”；
onClickHandler（sq2）；
});
函数onClickHandler（elem）{
elem.style.background='红色'；
elem.style.color='黑色'；
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--webfonts-->
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!--//webfonts-->
</head>
<body bgcolor="#3C4C55">
<style>.tictac{
width:50px;height:30px;padding: 5px; font-weight: bold; cursor: pointer; border-radius: 5px; border: 1px solid #D9D9D9; font-size: 75%;
</style>
<center>
</br></br></br></br></br></br>
<form method="get" action="button.html">
<table border="15" cellpadding="5" align="center" style="background-color:orange" >
<tr>
<td>
<input type="number" id="sq1" name="sqrone" placeholder="Value" class="tictac" />
<input type="number" id="sq2" name="sqrtwo" placeholder="Value" class="tictac" />
</td>
</tr>
</table>
</br></br>
<div>
<input type="submit" value="Submit" onclick="saveVal()">
</div>
<script type="text/javascript">
function saveVal() {
var squ1 = document.getElementById("sq1").value;
localStorage.setItem("sq1", squ1);
squ1 = localStorage.getItem("sq1");
var squ2 = document.getElementById("sq2").value;
localStorage.setItem("sq2", squ2);
squ2 = localStorage.getItem("sq2");
}
</script>
</form>
</center>
</div>
</body>
</html>
蒂克塔克先生{
宽度：50px；高度：30px；填充：5px；字体大小：粗体；光标：指针；边框半径：5px；边框：1px实心#D9D9D9；字体大小：75%；
函数saveVal（）{
var squ1=document.getElementById（“sq1”）.value；
setItem（“sq1”，squ1）；
squ1=localStorage.getItem（“sq1”）；
var squ2=document.getElementById（“sq2”）.value；
setItem（“sq2”，squ2）；
squ2=localStorage.getItem（“sq2”）；
}