Question

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[i].name}`
    price.innerText = `$${initial[i].price}`
    occ.innerText = `${initial[i].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;
}

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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Freelancer Forum</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="box">
        <div id="title">
            <h1>Freelancer Forum</h1>
            <p class="avg">The average starting price is 
            </p>
            <h2>Available Freelancers: </h2> 
            <div id="lists">
                <h3>Name</h3>
                <h3>Price</h3>
                <h3>Occupation</h3>
            </div>
        </div>
        <div class="container">  
        </div>
    </div>


        <script src="script.js"></script>
</body>
</html>

我设立了两个职能,在超文本页上展示一系列物体。

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[i].name}`
    price.innerText = `$${initial[i].price}`
    occ.innerText = `${initial[i].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();
}

而这一功能是把来自另一阵列的物体添加到初始阵列。

出于某种原因,超文本网页上的产出正在重复重复同一初步阵列,而不是仅仅在名单上添加新的物体。以下是对产出所看像的筛选(指作为初始阵列的重复“冰”和“Bob”物体)。

传真:DISPLAY

我对问题确实没有想法。我对 Java和超文本是很新的,因此,如果这是被忽略的简单情况,我会抱歉。任何帮助都受到高度赞赏。

(https://github.com/antjuh/Unit2.FreelancerForum.git ) 吉特·霍特(签名)

EDIT:道歉,我增加了Java语、超文本和CSS语,以方便进入。

Answer 1

问题在于,你重复了同一人的最初名单。因此,它将再次重复同一人。

因此,我增加了一个变量,即只要它能使其达到初步名单的长度,那么在列入清单时,它就不再重复同一人。

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;

let initialListThingy = 0 // I don t know what to name this

render();


const addFreelancerInterval = setInterval(addFreelancer, 5000);



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

    for(i = initialListThingy; 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[i].name}`
    price.innerText = `$${initial[i].price}`
    occ.innerText = `${initial[i].occupation}`
    
    usersBox.appendChild(name)
    usersBox.appendChild(price)
    usersBox.appendChild(occ)
    
    container.appendChild(usersBox)
  }
  initialListThingy = initial.length
}


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;
}

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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Freelancer Forum</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="box">
        <div id="title">
            <h1>Freelancer Forum</h1>
            <p class="avg">The average starting price is 
            </p>
            <h2>Available Freelancers: </h2> 
            <div id="lists">
                <h3>Name</h3>
                <h3>Price</h3>
                <h3>Occupation</h3>
            </div>
        </div>
        <div class="container">  
        </div>
    </div>


        <script src="script.js"></script>
</body>
</html>

友情链接