<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js"></script>
<input type='text' id='txt'>
<div id='chkbox' style="width:300px"></div>
<script>
let chkbox = document.querySelector('#chkbox');
var socket = io('http://localhost:3000');
let txt = document.querySelector('#txt');
txt.addEventListener('keyup', e => {
// console.log(txt.value);
socket.emit('눌렀다', txt.value);
})
socket.on('갱신', function (msg) {
txt.value = msg;
});
socket.on('칠받자', function (msg) {
document.querySelector('#' + msg).checked = true;
});
document.body.style = 'line-height:85%'
for (let i = 0; i < 1000; i++) {
let input = document.createElement('input');
input.id = 'chk' + i;
input.type = 'checkbox'
input.style.margin = '0px';
chkbox.appendChild(input);
input.addEventListener('mouseover', function (e) {
input.checked = true;
socket.emit('칠해', input.id);
// console.log(this.id)
})
}
</script>
</head>
<body>
</body>
</html>