javascript - Clicking a button with same value in socket.io -
i stuck problem many day , havent found solution can 1 me solve please. have 2 buttons in client page shown here listen server on port 3000. button gets values html form, different clients have different values. @ present able click buttons based on id if 1 client clicks button id sq1 button same id gets clicked automatically. want when click button value 1 button same value show clicked automatically
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 @ 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>
Comments
Post a Comment