有办法用香草JavaScript的条件来更新背景颜色吗？

Question

我试图更新以下项目的背景色(总共12项)，并让它每5s刷新一次，这取决于我们从服务器得到了什么，然而，它似乎不起作用。

到目前为止，这就是我所拥有的：

​

let pegInactive = 0;
let pegActive = 1;
let pegFinished = 2;

function createPeg(name, checkActive) {

  const uiProgressBar = document.querySelector(`.${name}-bar-fill`);
  console.log(uiProgressBar);

  let currentStatus = 0;

  // returns the current time
  function getStatus() {
    return currentStatus;
  }

  console.log(uiProgressBar);

  function checkActive(newStatus) {
    if (newStatus < 0) newStatus = 0;

    currentStatus = newStatus;
    console.log(newStatus);
  }
  return {
    ui: {
      progressBar: uiProgressBar,

    }
  }
}
const intervalId = setInterval(updateBackgorund, 5000);

const allPegs = [
  createPeg('peg-1', pegActive["one"]),
  createPeg('peg-2', pegActive["two"]),
  createPeg('peg-3', pegActive["three"]),
  createPeg('peg-4', pegActive["four"]),
  createPeg('peg-5', pegActive["five"]),
  createPeg('peg-6', pegActive["six"]),
  createPeg('peg-7', pegActive["seven"]),
  createPeg('peg-8', pegActive["eight"]),
  createPeg('peg-9', pegActive["nine"]),
  createPeg('peg-10', pegActive["ten"]),
  createPeg('peg-11', pegActive["eleven"]),
  createPeg('peg-12', pegActive["twelve"]),
];

// peg1 === 0 ? peg1BarFill.style.background="green" : peg1BarFill.style.background="red";

function updateBackgorund() {
  for (const peg of allPegs) {
    const backgroundColour = peg.getStatus()
    if (backgroundColour > 0) {
      uiProgressBar.Style.backgroundColour = "green";
      console.log(uiProgressBar.Style.backgroundColour = "green");
      if (backgroundColour === 0) {
        uiProgressBar.Style.backgroundColour = "red";
      } else {
        uiProgressBar.Style.backgroundColour = "gray";
      }
    }
  }
}
if (allPegs.every(peg => peg.getStatus() === 0)) {
  clearInterval(intervalId);
}

:root {
  --color-white : whitesmoke;
  --color-light-gray : lightgray;
  }
  .peg-wrapper {
  background-color: var(--color-white);
  border-radius: 15px;
  box-shadow: 2px 1px 1px 1px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  margin-bottom: 26px;
  margin-left: 80px;
  height: 97px;
}

.peg-1-bar, .peg-2-bar, .peg-3-bar, 
.peg-4-bar, .peg-5-bar, .peg-6-bar, 
.peg-7-bar, .peg-8-bar, .peg-9-bar, 
.peg-10-bar, .peg-11-bar, .peg-12-bar {
  background-color: var(--color-light-gray);
  border-radius: 50px;
  height: 20px;
  width: 400px;
  margin-left: 30px;
}
.peg-1-bar-fill, .peg-2-bar-fill, .peg-3-bar-fill, 
.peg-4-bar-fill, .peg-5-bar-fill, .peg-6-bar-fill, 
.peg-7-bar-fill, .peg-8-bar-fill, .peg-9-bar-fill, 
.peg-10-bar-fill,.peg-11-bar-fill, .peg-12-bar-fill {
  border-radius: 50px;
  height: 100%;
  width: 100%;
  max-width: 400px;
}

<div class="peg-wrapper">
  <div class="peg-name-1" ><h4> 1</h4></div>
  <div class="peg-1-bar" ><div class="peg-1-bar-fill" ></div></div>
</div>
<div class="peg-wrapper"><div class="peg-name-2" ><h4> 2</h4></div><div class="peg-2-bar" ><div class="peg-2-bar-fill" ></div></div></div>
<div class="peg-wrapper"><div class="peg-name-3" ><h4> 3</h4></div><div class="peg-3-bar" ><div class="peg-3-bar-fill" ></div></div></div>
<div class="peg-wrapper"><div class="peg-name-4" ><h4> 4</h4></div><div class="peg-4-bar" ><div class="peg-4-bar-fill" ></div></div></div>
<div class="peg-wrapper"><div class="peg-name-5" ><h4> 5</h4></div><div class="peg-5-bar" ><div class="peg-5-bar-fill" ></div></div></div>
<div class="peg-wrapper"><div class="peg-name-6" ><h4> 6</h4></div><div class="peg-6-bar" ><div class="peg-6-bar-fill" ></div></div></div>
<div class="peg-wrapper"><div class="peg-name-7" ><h4> 7</h4></div><div class="peg-7-bar" ><div class="peg-7-bar-fill" ></div></div></div>
<div class="peg-wrapper"><div class="peg-name-8" ><h4> 8</h4></div><div class="peg-8-bar" ><div class="peg-8-bar-fill" ></div></div></div>
<div class="peg-wrapper"><div class="peg-name-9" ><h4> 9</h4></div><div class="peg-9-bar" ><div class="peg-9-bar-fill" ></div></div></div>
<div class="peg-wrapper"><div class="peg-name-10"><h4>10</h4></div><div class="peg-10-bar"><div class="peg-10-bar-fill"></div></div></div>
<div class="peg-wrapper"><div class="peg-name-11"><h4>11</h4></div><div class="peg-11-bar"><div class="peg-11-bar-fill"></div></div></div>
<div class="peg-wrapper"><div class="peg-name-12"><h4>12</h4></div><div class="peg-12-bar"><div class="peg-12-bar-fill"></div></div></div>

​

有人能帮我一把吗？我已经试着让它工作了一个月，但无法摆脱这一僵局。

我得到以下错误：

Uncaught : peg.getStatus不是test4.js:70:30 at Array.every ()在test4.js:70:13上的函数

Uncaught : peg.getStatus不是updateBackgorund上的函数( test4.js:57 :34) updateBackgorund @test4.js:57 setInterval (异步)(匿名)@ test4.js:36

Answer 1

您还没有在getStatus()对象中定义方法peg。也许以下几点可能会有所帮助：

function createPeg(name, checkActive) {

  const uiProgressBar = document.querySelector(`.${name}-bar-fill`);
  console.log(uiProgressBar);

  console.log(uiProgressBar);

  function checkActive(newStatus) {
    if (newStatus < 0) newStatus = 0;

    currentStatus = newStatus;
    console.log(newStatus);
  }
  return {
    ui: {
      currentStatus: 0,
      progressBar: uiProgressBar,
      getStatus: function() { return this.currentStatus; }
    }
  }
}