这是我面临的情况的图像 screenshot IMAGE我有2个按钮,它们从html表单中获取它们的值,我正在使用节点js和套接字。当我点击一个按钮在其他选项卡中的按钮与相同的ID被点击,但我想要的是,当我点击一个值为1的按钮(例如)值为1的按钮应该得到点击这不是在这里发生。我正在想一种方式,我可以使用按钮值作为按钮ID任何人都可以帮助我。使用按钮值作为javascript中的按钮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>
我的按钮值会有所不同,对于两个客户端,我在问题中添加了屏幕截图请检查请求 – vamshi
发送和接收数据的一般想法可能仍然适用 –
我试过了您的建议,但仍然可以工作在相同方式,按钮被点击id不值。 – vamshi