javascript - 如何将我的函数应用于多个元素？

Question

我正在努力将我的函数应用于多个元素。我想做的是让每个元素单独改变。

只有第一个元素发生变化。我正在尝试将其应用于所有三个，并且它们都应该单独更改。

例如:

不可用

可用

可用

var myVar = setInterval(breakdown, 2000);

function breakdown() {

  var d = Math.random();

  if (d < 0.90) {
    str = "Avaliable";
    text = str.fontcolor("green");
    x = true;
  } else {
    str = "Not Avaliable";
    text = str.fontcolor("red");
    y = false;
  }

  var elems = Array.from(document.querySelectorAll('.demo'));
  for (const elems1 of elems) {
    elems1.innerHTML = text;
    break;
  }
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>

Answer 1

只需将随机数的生成移动到 for 循环中并删除 break 语句(为了更好的评估，我将 0.9 减少到 0.5)

var myVar = setInterval(breakdown, 2000);

function breakdown() {

  let elems = Array.from(document.querySelectorAll('.demo'));
  for (const elems1 of elems) {
    let d = Math.random();

    if (d < 0.50) {
      let str = "Avaliable";
      text = str.fontcolor("green");
      x = true;
    } else {
      let str = "Not Avaliable";
      text = str.fontcolor("red");
      y = false;
    }
    elems1.innerHTML = text;
  }
  
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>