цикл javascript
Доброе время суток не знаю как написать цикл которий вивидет 20 шт как я сделал вручну
<div class="mesta">1</div> <!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: 30px;
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 class="mesta">1</div>
<div class="mesta">2</div>
<div class="mesta">3</div>
<div class="mesta">4</div>
<div class="mesta">5</div>
<div class="mesta">6</div>
<div class="mesta">7</div>
<div class="mesta">8</div>
<div class="mesta">9</div>
<div class="mesta">10</div>
<div class="mesta">11</div>
<div class="mesta">12</div>
<div class="mesta">13</div>
<div class="mesta">14</div>
<div class="mesta">15</div>
<div class="mesta">16</div>
<div class="mesta">17</div>
<div class="mesta">18</div>
<div class="mesta">19</div>
<div class="mesta">20</div>
</div>
</div>
<script>
var l = document.getElementsByClassName('mesta');
let c = [];
for(let i=1;i<+8;i++){
c.push(i)
}
console.log(c);
l.write('<div>' + c + '<div />');
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=='green'
}
}
return z_mest;
}
for(let i=0;i<l.length;i++){
l[i].onclick = function(){
this.style.background='red';
document.getElementById('count_').innerHTML = 'Выбрано мест : '+Count_Mest ();
}
}
</script>
</body>
</html>
вот что я пробовал var l = document.getElementsByClassName('mesta');
let c = [];
for(let i=1;i<+8;i++){
c.push(i)
}
console.log(c);
l.write('<div>' + c + '<div />');
|
Цитата:
|
misha.korolcov,
<!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%;
display: flex;
flex-wrap: wrap;
}
.mesta{
width: calc(5% - 2px);
height: 30px;
background-color: silver;
margin: 1px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.mesta.red{
background-color: hsla(0, 100%, 50%, 1);
}
#count_{
flex-basis: 100%;
display: flex;
}
.busy{
flex-basis: 24px;
border-radius: 50%;
background-color: hsla(0, 100%, 50%, 1);
color: hsla(0, 0%, 100%, 1);
text-align: center;
margin: 4px;
}
</style>
</head>
<body>
<h1 class="text-center mt-4">Cinema</h1>
<div class="container mt-5">
<div class="cinoteatr">
<div id='count_'></div>
<div class="mesta">1</div>
<div class="mesta">2</div>
<div class="mesta">3</div>
<div class="mesta">4</div>
<div class="mesta">5</div>
<div class="mesta">6</div>
<div class="mesta">7</div>
<div class="mesta">8</div>
<div class="mesta">9</div>
<div class="mesta">10</div>
<div class="mesta">11</div>
<div class="mesta">12</div>
<div class="mesta">13</div>
<div class="mesta">14</div>
<div class="mesta">15</div>
<div class="mesta">16</div>
<div class="mesta">17</div>
<div class="mesta">18</div>
<div class="mesta">19</div>
<div class="mesta">20</div>
</div>
</div>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const cinoteatr = document.querySelector(".cinoteatr"),
count = document.getElementById('count_');
cinoteatr.addEventListener("click", ({target}) => {
if(target = target.closest(".mesta")) {
target.classList.toggle("red");
const busyArr = cinoteatr.querySelectorAll(".red")
const check = Array.from(busyArr, ({textContent}) => `<div class="busy">${textContent}</div>`).join("")
count.innerHTML = `${check} Всего: ${busyArr.length} мест`;
}
})
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 21:31. |