Question

我坚持这个问题这么多天，我没有找到任何解决方案可以任何人帮我解决这个问题。我的客户端页面中有两个按钮，如PUT as create所示，它监听端口3000上的服务器。该按钮从html表单中获取其值，因此不同的客户端具有不同的值。目前我可以根据他们的ID点击按钮，如果一个客户端点击一个id为sq1的按钮，则会自动点击具有相同id的按钮。但我想要的是当我点击值为1的按钮时，会自动点击显示相同值的按钮

app.js

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');

button.html

<!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>

的index.html

<!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>

单击socket.io中具有相同值的按钮

0 个答案: