Recently i learned how to autofill <ol> <li> according to JS array elemnts
Now i have a more complicated task and what i learned there does not work
It should be cards elements.
Each card has <div> with textContent inside it's main <div>. Also have JS Array. Lot of child elements such as another <div> <ol> <img> currently created automatically for the first card.
Task is to make it continue autofilling new card element, not stopping on the first one.
Codepen sandbox of the task. As you can see, second field is empty now
I have tried to solve it with:
document.querySelectorAll('.card').forEach(div => {
const name = div.querySelector(".name").textContent;
const search = name;
......code from Codepen goes here...
});
But no result, it only worked with simle list
CodePudding user response：
The code needed some 'big' changes to make it work for looping over the types:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div >
</div>
</body>
</html>
* {
font-family: monospace;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
margin-left: 5%;
margin-right: 5%;
}
.specs:before {
content: "something";
font-weight: bold;
text-transform: uppercase;
}
li:nth-child(1) {
margin-top: 4px;
}
.cities:before {
content: "";
font-weight: bold;
text-transform: uppercase;
}
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: black;
}
.card {
background-color: #f5f5f5;
width: 250px;
height: auto;
border: 1px solid #fff;
position: relative;
display: flex;
flex-direction: column;
margin: 5px 10px;
}
.title {
text-align: center;
font-weight: bold;
}
.car-image {
margin-top: 2px;
display: flex;
justify-content: center;
position: relative;
}
.car-image:hover {
cursor: zoom-in;
}
img {
width: 250px;
object-fit: contain;
}
img:active {
position: absolute;
top: 0;
left: 0;
z-index: 55;
transition: all 0.4s ease-in-out;
transform: scale(1.8);
}
.label {
font-size: 9px;
text-align: center;
background-color: red;
padding: 2px 3px 2px 3px;
color: white;
position: absolute;
right: 8px;
top: 16px;
text-transform: uppercase;
}
.download {
margin: 4px 3px;
display: flex;
justify-content: center;
border: 1px solid #b0b0b0;
border-radius: 0px;
background-color: white;
text-transform: uppercase;
}
.download:hover,
.readmore:hover {
background-color: #e7f0dd;
}
/*card description lists*/
.col {
margin: -8px 0px 0px 0px;
display: flex;
justify-content: space-evenly;
}
.laptime li,
.specs li {
list-style-type: none;
line-height: 1.3;
font-size: 13px;
}
ol li:first-of-type {
text-transform: uppercase;
font-size: 13px;
}
li h4 {
line-height: 0;
margin: -8px 0px 10px 0px;
}
.laptime,
.specs {
margin-left: -12%;
}
const types = [
{
name: "Flat 1",
tag: "house",
architector: "MrA",
year: 1998,
weight: 1270,
style: "classic",
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGI6MVnc4PyHx6DxWho0LVVwLhgmarjarvTcJtststZiaMFrdTdXA7DlN12EX2Tyqaudc&usqp=CAU",
cities: [
{ area: "NY", qty: "1.05.354" },
{ area: "TK", qty: "4.35.354" },
{ area: "OS", qty: "4.49.354" },
],
},
{
name: "Apartment 2",
tag: "apt",
architector: "Mr X",
year: 2021,
weight: 1720,
style: "modern",
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_vbKVKMvq6fL5ChtQPl35YiNzW7yUYiWBQU8z_cr4GCEMnxZ1BWcVLcvh3vFYOxcb6MA&usqp=CAU",
cities: [
{ area: "LO", qty: "1.06.354" },
{ area: "BAR", qty: "5.35.354" },
],
},
];
/*--------------------------------------------------------------------------*/
types.forEach((item) => {
console.log(item);
/*calculate Perfomance Points*/
const performancePoints = `${
Math.round((item.weight / item.year) * 100) / 100
}`;
item.pp = performancePoints;
let container = document.querySelector("div.flex");
console.log(container);
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "card");
container.appendChild(newDiv);
var elem = document.createElement("img");
elem.setAttribute("src", `${item.img}`);
elem.setAttribute("class", "car-image");
newDiv.appendChild(elem);
//add label on the pic
var elemPL = document.createElement("p");
elemPL.setAttribute("class", "label");
var elemText1L = document.createTextNode(`${item.tag}`);
elemPL.appendChild(elemText1L);
newDiv.appendChild(elemPL);
// add button
var elemP = document.createElement("button");
elemP.setAttribute("class", "download");
var elemText1 = document.createTextNode(`smth will be here`);
elemP.appendChild(elemText1);
newDiv.appendChild(elemP);
var columns = document.createElement("div");
columns.setAttribute("class", "col");
newDiv.appendChild(columns);
//
let ol1 = document.createElement("ol");
ol1.setAttribute("class", "specs");
ol1.innerHTML = `<li>${item.year}</li><li>${item.weight}</li><li>${item.architector}</li><li>${item.pp} PP</li>`;
columns.appendChild(ol1);
//
let result = [];
for (const a of item.cities) {
result.push(`<li>${a.area}: ${a.qty}</li>`);
}
let ol2 = document.createElement("ol");
ol2.setAttribute("class", "cities");
ol2.innerHTML = result.join("");
columns.appendChild(ol2);
});
Check out this codepen to look at the changes