在javascript中使用按钮值作为按钮ID答案

【问题标题】：Use button value as button ID in javascript在javascript中使用按钮值作为按钮ID
【发布时间】：2017-04-05 05:29:16
【问题描述】：

这是我面临的情况的图像 screenshot IMAGE 我有 2 个按钮，它们从 html 表单中获取它们的值，我为此使用节点 js 和套接字。当我单击一个选项卡中的一个按钮时，另一个选项卡中具有相同 ID 的按钮被单击，但我想要的是当我单击值为 1 的按钮时（示例），应单击值为 1 的按钮，但此处不会发生。我正在考虑一种方法，我可以使用按钮值作为按钮 ID 任何人都可以帮助我。

编辑

我正在考虑使用 IF/ELSE 条件，当我们单击按钮时，它将搜索具有单击按钮的值的按钮并触发它

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

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>


<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!--//webfonts-->

</head>
<body bgcolor="#3C4C55">
<script>
if (document.all||document.getElementById){
document.write('<style>.tictac{')
document.write('width:50px;height:30px;padding: 5px;  font-weight: bold; cursor: pointer; border-radius: 5px; border: 1px solid #D9D9D9; font-size: 75%;')
document.write('}</style>')
}
</script>
<div class="main">
<center>
</br></br></br></br></br></br>
<form method="get" action="button.html">
<table id="employeeTable" border="15" cellpadding="5" align="center" style="background-color:orange" >
    <tr>

<td>
<input type="number" id="sq1" name="sqrone"   placeholder="Value" class="tictac"  />
</td>
<td>
<input type="number" id="sq2" name="sqrtwo"   placeholder="Value" class="tictac"  />
</td>
</tr>

</table>
</br></br>

<div class="submit">
                <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>
 <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "dskstkcm"
    }], "*")
  }
</script>
</form>
        </center>
        </div>
</body>
</html>

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="sqr1" class="tictac" value="Send!" onClick="onClickHandler(this)"/>

      <input type="button" id="sq2" NAME="sqr2" class="tictac" value="Get!" onClick="onClickHandler(this)"/>

      </form>

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

      <h2 id="alert"> waiting...</h2>


      <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() {
  var button = document.getElementById('sq1');

  console.log('clicked');
  document.getElementById("alert").innerHTML = "1 clicked";

  onClickHandler(sq1);
});
socket.on('clicked1', function() {
  var button = document.getElementById('sq2');

  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>

【问题讨论】：

标签： javascript sockets button socket.io click

【解决方案1】：

您可能想要做的是提取有关单击了哪个按钮的信息，然后使用 socket.io 发出该数据。 socket.emit 的第二个参数可以是一个对象，将传递给socket.on('event', function(data){ /* data passed from socket.emit */ }) 的监听器。您可能需要以同样的方式从服务器重新发送这些数据。

客户端示例：https://jsfiddle.net/wcmtk5mj/

确保在上例中使用socket.emit 和socket.on 时删除onClicked 模拟。

【讨论】：

我的按钮值对于两个客户端会有所不同，我在问题中添加了一个屏幕截图，您可以检查一下吗
发送和接收数据的一般思路可能仍然适用
我尝试了你的建议，但它仍然以相同的方式工作，按钮被 id 而不是值点击。