使用按鈕值作爲javascript中的按鈕ID

這是我面臨的情況的圖像 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>

來源

2017-04-05 vamshi

你可能想要做的是提取有關被點擊了哪個按鈕的信息，然後發射出的數據與socket.io。 socket.emit的第二個參數可以是將傳遞給socket.on('event', function(data){ /* data passed from socket.emit */ })的偵聽器的對象。您可能需要以相同的方式從服務器重新發送此數據。

客戶例如：https://jsfiddle.net/wcmtk5mj/

確保在本例中使用上述socket.emit和socket.on當您刪除onClicked模擬。

來源

2017-04-05 06:57:12

我的按鈕值會有所不同，對於兩個客戶端，我在問題中添加了屏幕截圖請檢查請求 – vamshi

發送和接收數據的一般想法可能仍然適用 –

我試過了您的建議，但仍然可以工作在相同方式，按鈕被點擊id不值。 – vamshi

使用按鈕值作爲javascript中的按鈕ID

回答

相關問題