Доброе время делаю онлайн кинотеатр на js не могу сделать выбор мест нормально вот то что у меня вишло
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
.cinoteatr{
width: 100%;
float: left;
}
.mesta{
float:left;
width: calc(5% - 2px) ;
height: 100px;
background: silver;
margin: 1px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<h1 class="text-center mt-4">Cinema</h1>
<div class="container mt-5">
<div class="cinoteatr">
<div id='count_'></div>
</div>
</div>
<script>
// for (var i = 0; i < gbrCoordinates.length; i++) {
// let coordinate = JSON.parse(gbrCoordinates[i].polygon);
// gbrPoligon = new google.maps.Polygon({
// paths: coordinate,
// strokeColor: gbrCoordinates[i].color,
// strokeOpacity: 0.8,
// strokeWeight: 2,
// fillColor: gbrCoordinates[i].color,
// fillOpacity: 0.35,
// Editable: true,
// draggable: true
// });
// gbrPoligon.setMap(map);
// пуш мість в хтмл
var cinoteatr=document.querySelector('.cinoteatr');
function Place(id,price){
this.id = id;
this.price = 10;
this.bool = true;
}
var test = {};
for (let i=1; i<801; i++){
var test = new Place((i));
cinoteatr.insertAdjacentHTML('beforeend', '<div class="mesta">' + 'місце' + '</br>' + test.id + '</br>' + 'ціна' + '</br>' + test.price + '</div>');
}
var test = [];
let user = new function() {
this.name = "Вася";
}
let image = false
var l = document.getElementsByClassName('mesta');
function Count_Mest (){
let z_mest = 0;
for(let i=0;i<l.length;i++){
if(l[i].style.background=='red'){
z_mest++;
}else{
l[i].style.background=='silver'
}
}
return z_mest;
}
for(let i=0;i<l.length;i++){
l[i].onclick = function(){
if(image){
this.style.background='silver'
} else{
this.style.background='red'
}
image = !image
document.getElementById('count_').innerHTML = 'Вибрано місць : '+Count_Mest ();
}
}
</script>
</body>
</html>
