Форум

ShuShuShu · #1 (**permalink**) 02.08.2021, 10:15

Как это сделать с числами я нашел.

for (let i = 1; i <= 9; i++) {
	let str = ''; // каждый раз зачищаем строку
	for (let j = 1; j <= i; j++) {
		str += i;
	}
	document.write(str + '<br>');
}

А вот как это сделать так чтобы количество html-тегов

<div class="flex-item color"></div>

с каждой итерацией цикла увеличивалось понять не могу.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Example 2</title>
    <style>
        #game {
            width: 1000px;
            height: 1000px;
        }
        .flex-container {
            display: flex;
        }
        .center {
            justify-content: center;
        }
        .flex-item {
            height: 100px;
            width: 100px;
            border: 1px solid white;
        }
        .color {
            background-color: #9BC850;
        }
    </style>
</head>
<body>
    <div id="game"></div>
    <script>
        for (let i = 0; i < 3; i++) {
            for (let l = 0; l < 1; l++) {}
            document.getElementById('game').innerHTML += '<div id="block" class="flex-container center"><div class="flex-item color"></div></div>'
        }
    </script>
</body>
</html>

ksa · #2 (**permalink**) 02.08.2021, 10:55

ShuShuShu, ты бы сделал ХТМЛ, который ты собираешься получить в итоге...

ShuShuShu · #3 (**permalink**) 02.08.2021, 11:10

В итоге должно получится вот так.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Example 2</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="block" class="flex-container center">
        <div class="flex-item color"></div>
    </div>
    <div id="block" class="flex-container center">
        <div class="flex-item color"></div>
        <div class="flex-item color"></div>
        <div class="flex-item color"></div>
    </div>
    <div id="block" class="flex-container center">
        <div class="flex-item color"></div>
        <div class="flex-item color"></div>
        <div class="flex-item color"></div>
        <div class="flex-item color"></div>
        <div class="flex-item color"></div>
    </div>
</body>
</html>

ksa · #4 (**permalink**) 02.08.2021, 12:14

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

id="block"

С ИД так не пойдет...

ИД должно быть уникальным на странице.

ksa · #5 (**permalink**) 02.08.2021, 12:26

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

В итоге должно получится вот так.

Тогда так и пиши...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
div {
	min-height: 10px;
	border: 1px solid;
	margin: 10px;
}
</style>
<script>
</script>
</head>
<body>
<script>
for (let i = 0; i < 3; i++) {
	const container = document.getElementsByTagName('body')[0]
	let ln = document.createElement('div')
	ln.classList.add('flex-container')
	ln.classList.add('center')
	const max = i * 2 + 1
	for (let j = 0; j < max; j++) {
		let o = document.createElement('div')
		o.classList.add('flex-item')
		o.classList.add('color')
		ln.appendChild(o)
	}
	container.appendChild(ln)
}
</script>
</body>
</html>

ShuShuShu · #6 (**permalink**) 02.08.2021, 13:14

Спасибо большое! Кажется немного разобрался и понял информацию по каким темам мне нужно читать. Спасибо.

Форум

Справочник

Discord чат

Курсы javascript