Javascript multiple onclick (dynamically generated)

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP

Javascript multiple onclick (dynamically generated)



I'm trying to make a checkers game with nodejs and socketio.
For this I must make a socket.emit on the client side to specify which button is clicked.



I've tried a lot of differents ways but I'm not able to fill the onclick field dynamically. I have to make this for 32 tiles. Each tile must send to the socket its id.
I think the (main) issue is with the "id.value" in js.js (I've tried with Attr(), with string convertion, with only "id", with "this" and a lot more btw)
The better I can get is 32 times the right message (way number2)



Here is the code
index.html `


<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload="load()">
<div>
<b>Jeu de dames</b>

</div>

</div>
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:createTable()">

</div>
</body>
</html>

<style type="text/css">

.noir, .blanc
width: 100%;
height:100%;
border: none;


.noir
background-color: #222222;
color: #FFFFFF;



.blanc
background-color: #FFFFFF;
color: #000000;


.noir:hover
background-color: #222299;

</style>



`



js.js (client side, js for index.html)


function load()

console.log("Page load finished");



function createTable()


var myTableDiv = document.getElementById("myDynamicTable");

var table = document.createElement('TABLE');
table.border='1';

var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);

var flag = false; //pour alterner cases noirs et blanches

for (var i=0; i<8; i++)
var tr = document.createElement('TR');
tableBody.appendChild(tr);
flag =! flag; // casse l'alignement : permet une alternance en quinconces

for (var j=0; j<8; j++)
var td = document.createElement('TD');
td.width='75';
td.height='75';


if(flag) //case noire, possibilité de mettre son pion dessus
//1st method
var button = document.createElement('button');
button.appendChild(document.createTextNode(i + "," + j));
var id = document.createAttribute("id");
onclk = document.createAttribute("onclick");
id.value = String(i)+","+String(j);
onclk.onclick = function()
console.log("click");
socket.emit('move', id.value);
;

button.setAttributeNode(id);
button.setAttributeNode(onclk);

td.appendChild(button);

var classe = document.createAttribute("class");
classe.value = "noir";
button.setAttributeNode(classe);
tr.appendChild(td);

//2nd method) print the message 32 times
/* $(document.body).on('click', 'button', function()
console.log('button ' + this.id + ' clicked');
);*/

//3rd method) does not work
// var val = String(Attr(id.value));
//console.log(val);
//document.getElementById().addEventListener("click", function()
// console.log("ok");
//socket.emit('move', attr(id));
//);
//socket.emit('move', attr(id));

else //case blanche, ne sert à rien

var classe = document.createAttribute("class");
classe.value = "Blanc";
td.setAttributeNode(classe);
tr.appendChild(td);



flag = !flag


myTableDiv.appendChild(table);



and finaly Server.js


var http = require('http');
var fs = require('fs');
var url = require('url');


// Chargement du fichier index.html affiché au client
var server = http.createServer(function(request, response)
var pathname = url.parse(request.url).pathname;
console.log("request for" + pathname + "received")
response.writeHead(200);
if(pathname == "/")
html = fs.readFileSync("index.html", "utf8");
response.write(html);

else if (pathname == "/js.js")
script = fs.readFileSync("js.js", "utf8");
response.write(script);

response.end();
);


// Chargement de socket.io
var io = require('socket.io').listen(server);

// Quand un client se connecte, on le note dans la console
io.sockets.on('connection', function (socket)
console.log('Un client est connecté !');
);

io.sockets.on('move', function (socket)
console.log('Attention, ça va bouger!');
);




server.listen(8080);



Thanks
Guillaume



(Sorry for the bad english)









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

Executable numpy error

Image
Clash Royale CLAN TAG #URR8PPP Executable numpy error I'm trying to create an executable file for my code. I've already tried with cx_Freeze and with pyinstaller. Both gives me the same error, which is: "Missing required dependencies 0.format(missing_dependencies))" PS C:UsersGustavoDesktopbuildexe.win32-3.6> python AgendaOficial.py C:UsersGustavoAppDataLocalProgramsPythonPython36-32python.exe: can't open file 'AgendaOficial.py': [Errno 2] No such file or directory PS C:UsersGustavoDesktopbuildexe.win32-3.6> .AgendaOficial.exe Traceback (most recent call last): File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_Freezeinitscripts__startup__.py", line 14, in run module.run() File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_FreezeinitscriptsConsole.py", line 26, in run exec(code, m. dict ) File "AgendaOficial.py", line 8, in File "C:UsersGustavoAppDataLocal...
Read more

Trying to Print Gridster Items to PDF without overlapping contents

Image
Clash Royale CLAN TAG #URR8PPP Trying to Print Gridster Items to PDF without overlapping contents I want to print gridster items to pdf using chome browser. Unfortunately the item overlaps on next page. Is there any way to make gridster item go to next page if it doesnt fit in the current page when printing to pdf? Screenshot By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Read more

Hystrix command on request collapser fallback

Image
Clash Royale CLAN TAG #URR8PPP Hystrix command on request collapser fallback I have a scenario where I want to apply hystrix on the fallback (and process one-by-one) of a hystrix request collapser's batch method. The fallback method ( processEntryBatch_fallback ) is invoked. But the hystrix command ( processEntryBackup ) in turn the fallback invokes is not reported (doesn't even appear on dashboard). And the fallback method ( finalFallback ) is not invoked either. I would like to know what am I missing here ? I referred javanica documentation processEntryBatch_fallback processEntryBackup finalFallback @Service public class DummyService private static final Logger log = LoggerFactory.getLogger(DummyService.class); //batch processing method public void processEntry(List<String> msg) //batch processing throw new RuntimeException("Exception while batch processing"); //processing one-by-one @HystrixCommand(fallbackMethod="finalFallback") public ...
Read more