Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.07.2020, 13:59
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 05.09.2019
Сообщений: 80

цикл 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, 29.07.2020 в 14:01. Причина: ошыбка
Ответить с цитированием
  #2 (permalink)  
Старый 29.07.2020, 15:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,906

Сообщение от misha.korolcov
Доброе время суток не знаю как написать цикл которий вивидет 20 шт как я сделал вручну
можно своими словами что хотите сделать?
Ответить с цитированием
  #3 (permalink)  
Старый 29.07.2020, 16:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,906

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Цикл while в JavaScript. Mugla Events/DOM/Window 9 15.04.2014 19:43
Цикл javascript jeka123 Серверные языки и технологии 3 25.08.2013 10:53
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 18:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 19:34
Как поместить javascript в php цикл do{} while() galap Общие вопросы Javascript 4 09.04.2010 13:57