Я пытаюсь заставить div показываться в соответствии с количеством элементов в классе, но вместо этого я получаю количество аргументов в конструкторе. создание div уже работает, но я просто не получаю нужное количество div.
Кто-нибудь знает, как получить длину элементов в классе, в этом случае мне нужно, чтобы это было 4 шт.
let toggleButton = document.getElementById('toggle-button-id')
let toggleStateSquare = false;
class Block {
constructor(title, description) {
this.title = title;
this.description = description;
}
}
var block1 = new Block('lieke', 'lorem ipsum dolor nogwattes');
var block2 = new Block('testjete', 'ldjfaoef aheoahf aflheaofhia afhoeahfoa ef aohfhoa');
var block3 = new Block('testte', 'ldjfaoef aheoahf aflheaofhia afhoeahfoa ef aohfhoa');
var block4 = new Block('rqed', 'lorem ipsum dofafdaffelor nogwattes');
console.log(Block.length)
createElements()
let elementsArray = document.querySelectorAll('.element')
setElementHeight()
function setElementHeight() {
elementHeight = document.getElementsByClassName("element")[0].clientWidth + 'px';
for (var i = 0; i < elementsArray.length; i++) {
elementsArray[i].style.height = elementHeight;
}
}
function createElements() {
for (var i = 0; i < Block.length; i++) {
console.log('test', i)
var block = document.createElement('div');
block.setAttribute('class', 'element');
block.setAttribute('id', `elementid${i+1}`);
document.getElementById('grid-container-id').appendChild(block);
console.log('block aangemaakt')
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
}
.grid-container {
padding: 40px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
/* grid-auto-rows:220px; */
grid-gap: 40px;
}
.element {
background: #4287f5;
/* grid-column: span 2; */
cursor: pointer;
display: flex;
align-items: flex-end;
padding: 20px;
}
h2 {
color: white;
}
p {
color: white;
}
.toggle-button-class {
position: fixed;
bottom: 20px;
right: 20px;
height: 70px;
width: 70px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.25);
font-size: 30px;
cursor: pointer;
}
@media only screen and (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (min-width: 1000px) {
.grid-container {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- import fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id='grid-container-id' class="grid-container">
</div>
<div class='toggle-button-class' id='toggle-button-id'><i class="fa fa-th-large"></i></div>
<script src="main.js"></script>
</body>
</html>