JavaScript HTML DOM

@Monsier · Регистрация: 16.10.2014

Студворк — интернет-сервис помощи студентам

Подскажите, пожалуйста, как добавить условие вывода кнопок... Перед первой кнопкой открывается <div>, а после второй кнопки закрывается </div>...
В данный момент выводится так:

HTML5
1
2
3
4
5
6
7
8
9
10
<div id="conclusion" class="conclusion-style">
        <button class="btn btn-disabled" disabled="disabled">1</button>
        <button class="btn btn-disabled" disabled="disabled">2</button>
        <button class="btn btn-disabled" disabled="disabled">3</button>
        <button class="btn btn-disabled" disabled="disabled">4</button>
        <button class="bgcustom btn btn-info">5</button>
        <button class="bgcustom btn btn-info">6</button>
        <button class="bgcustom btn btn-info">7</button>
        <button class="bgcustom btn btn-info">8</button>
</div>

Хотелось бы вот так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="conclusion" class="conclusion-style">
        <div>
            <button class="btn btn-disabled" disabled="disabled">1</button>
            <button class="btn btn-disabled" disabled="disabled">2</button>
        </div>
        <div>
            <button class="btn btn-disabled" disabled="disabled">3</button>
            <button class="btn btn-disabled" disabled="disabled">4</button>
        </div>
        <div>
            <button class="bgcustom btn btn-info">5</button>
            <button class="bgcustom btn btn-info">6</button>
        </div>
        <div>
            <button class="bgcustom btn btn-info">7</button>
            <button class="bgcustom btn btn-info">8</button>
        </div>
    </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let btn = document.querySelector("button");
btn.addEventListener("click", () => {
    let countActive = document.querySelector("input[name='count-active']");
    let all = document.querySelector("input[name='count-all']");
    for (let i = 0; i < all.value; i++) {
        let newBtn = document.createElement("button");
        newBtn.textContent = i + 1;
        if (i >= countActive.value) {
            newBtn.classList.add("bgcustom", "btn", "btn-info");
        } else {
            newBtn.classList.add("btn", "btn-disabled");
            newBtn.setAttribute("disabled", "disabled");
        }
        document.getElementById("conclusion").appendChild(newBtn);
        var element = document.getElementById("conclusion")
        element.style.border = "2px solid #ccc";
    }
});

HTML5
1
<div id="conclusion" class="conclusion-style"></div>

@Monsier · 23.12.2019, 13:03 **[ТС]**

Или быть может есть какие-то методы расположения блоков, как на скрине, посредством js ...

@Eva Rosalene · 25.12.2019, 19:55

Сообщение от Monsier

Или быть может есть какие-то методы расположения блоков, как на скрине, посредством js ...

Даже JS не нужен, чистый CSS.
https://codepen.io/eva-rosalene/pen/KKwqywG

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="root" class="container">
  <div class="item"><span class="text">1</span></div>
  <div class="item"><span class="text">2</span></div>
  <div class="item"><span class="text">3</span></div>
  <div class="item"><span class="text">4</span></div>
  <div class="item"><span class="text">5</span></div>
  <div class="item"><span class="text">6</span></div>
  <div class="item"><span class="text">7</span></div>
  <div class="item"><span class="text">8</span></div>
  <div class="item"><span class="text">9</span></div>
  <div class="item"><span class="text">10</span></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}
 
.item {
  height: 60px;
  width: 60px;
  background-color: green;
  margin: 20px;
  position: relative;
}
 
.text {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Из этого всего:
1. inline-flex позволяет подстроиться под детей по ширине, в отличие от самого flex.
2. direction и wrap задают порядок следования элементов в контейнере.

Остальные свойства просто для декорации.
Полезное чтиво про флексбокс: https://css-tricks.com/snippet... o-flexbox/

@Monsier · 26.12.2019, 10:15 **[ТС]**

Благодарю!)

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@Monsier 1 / 1 / 0 Регистрация: 16.10.2014 Сообщений: 19
	23.12.2019, 13:03 [ТС]
	Или быть может есть какие-то методы расположения блоков, как на скрине, посредством js ... Миниатюры 0

@Monsier 1 / 1 / 0 Регистрация: 16.10.2014 Сообщений: 19
	26.12.2019, 10:15 [ТС]
	Благодарю!) 0

JavaScript HTML DOM

Решение