Почему мой массив объектов не отображается от JavaScript до HTML? ⇐ Html

[Anonymous]

const initial = [
{ name: "Alice", price: 30, occupation: "Writer" },
{ name: "Bob", price: 50, occupation: "Teacher"}
]

const extraFreelancers = [
{ name: "Dr. Slice", price: 25, occupation: "Gardener" },
{ name: "Dr. Pressure", price: 51, occupation: "Programmer" },
{ name: "Prof. Possibility", price: 43, occupation: "Teacher" },
{ name: "Prof. Prism", price: 81, occupation: "Teacher" },
{ name: "Dr. Impulse", price: 43, occupation: "Teacher" },
{ name: "Prof. Spark", price: 76, occupation: "Programmer" },
{ name: "Dr. Wire", price: 47, occupation: "Teacher" },
{ name: "Prof. Goose", price: 72, occupation: "Driver" },
];

const maxLancers = 5;

render();

const addFreelancerInterval = setInterval(addFreelancer, 5000);

function render() {
const container = document.querySelector(".container")

for(let i = 0; i < initial.length; i++){
const usersBox = document.createElement("div")
usersBox.className = "usersBox"

const name = document.createElement("p")
const price = document.createElement("p")
const occ = document.createElement("p")

name.innerText = `${initial.name}`
price.innerText = `$${initial.price}`
occ.innerText = `${initial.occupation}`

usersBox.appendChild(name)
usersBox.appendChild(price)
usersBox.appendChild(occ)

container.appendChild(usersBox)
}
}

function addFreelancer() {
const freelancer = extraFreelancers[Math.floor(Math.random() * extraFreelancers.length)];
initial.push(freelancer);
render();

if (initial.length >= maxLancers) {
clearInterval(addFreelancerInterval);
}
averageStartingPrice();
}

const avg = document.createElement("p")
avg.className = "avg"
avg.innerText = `${averageStartingPrice()}`;

function averageStartingPrice() {
const totalStartingPrice = initial.reduce((acc, freelancer) => acc += freelancer.price, 0);
return totalStartingPrice / initial.length;
}< /code>
html {
background-color: white;
}

body {
background-color: white;
height: 100vh;
width: 100%;
margin: 0;
}

.usersBox{
display: flex;
border-bottom: 2px solid black;
text-align: center;
font-size: 30px;
padding: 10px;
height: 100px;
justify-content: center;
align-items: center;
justify-content: space-between;
width: 1000px;
}

#box {
margin: auto;
display: flex;
justify-content: center;
position: relative;
flex-direction: column;
align-items: center;
border: 5px solid black;
margin:100px;
padding: 0px;
}

p {
text-align: center;
margin: auto;
}

#title {
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
padding: 10px;
height: 200px;
width: 1000px;
flex-direction: column;
}

h1 {
margin: 10px;

}

h2 {
margin: 10px;
margin-bottom: 20px;
}

#lists{
justify-content: space-between;
display: flex;
}

h3 {
margin: 110px;
margin-top: 0px;
margin-bottom: 0px;
}< /code>





Freelancer Forum






Freelancer Forum
The average starting price is

Available Freelancers:

Name
Price
Occupation







< /code>
< /div>
< /div>
< /p>
Я создал две функции для отображения массива объектов на HTML -странице. < /p>
function render() {
const container = document.querySelector(".container")

for(let i = 0; i < initial.length; i++){
const usersBox = document.createElement("div")
usersBox.className = "usersBox"

const name = document.createElement("p")
const price = document.createElement("p")
const occ = document.createElement("p")

name.innerText = `${initial.name}`
price.innerText = `$${initial.price}`
occ.innerText = `${initial.occupation}`

usersBox.appendChild(name)
usersBox.appendChild(price)
usersBox.appendChild(occ)

container.appendChild(usersBox)
}
}
< /code>
Вышеуказанная функция для отображения массива на html. < /p>
function addFreelancer() {
const freelancer = extraFreelancers[Math.floor(Math.random() * extraFreelancers.length)];
initial.push(freelancer);
render();

if (initial.length >= maxLancers) {
clearInterval(addFreelancerInterval);
}
averageStartingPrice();
}
< /code>
и эта функция для добавления объектов из другого массива в начальный массив. Ниже приводится скриншот того, как выглядит выход (обратите внимание на повторяющиеся объекты «Алиса» и «Боб», которые являются начальным массивом). < /P>
HTML -дисплей < /p>
Я понятия не имею, где проблема. Я очень новичок в JavaScript и HTML, так что может быть что -то простое, что было упущено. доступ.

Подробнее здесь: https://stackoverflow.com/questions/783 ... l-properly