javascript - 如何在JS中循环使用Id名称？

Question

我正在尝试用 Javascript 制作游戏。

有一个部分，42 个 span 应该随机分配颜色。

我猜测我的代码由于以下部分而无法工作:

document.getElementById('s\'i\'').style.backgroundColor = color[c];

我希望有一种方法可以使用带有 id 名称的循环

var color = ["#FCB711", "#F37021", "#CC004C", "#6460AA", "#0080D0", "#0DB14B"];
var i;
for (i = 1; i <= 42; i++) {
  document.getElementById('demo').innerHTML = getRndInteger(0, 6);
  document.getElementById('s\'i\'').style.backgroundColor = color[c];
}

function getRndInteger(min, max) {
  var c = Math.floor(Math.random() * (max - min)) + min;
}

<span id="s1">s1</span><span id="s2">s2</span>
<span id="s3">s3</span><span id="s4">s4</span> ...

<span id="s40">s40</span> <span id="s41">s41</span><span id="s42">s42</span>

Answer 1

我假设我有 4 <span>针对您的 42 <span> s。

  var color = ["#FCB711", "#F37021", "#CC004C", "#6460AA", "#0080D0", "#0DB14B"];
  var i;
  for (i = 1; i <= 4; i++) { 
    document.getElementById('demo').innerHTML = getRndInteger(0,6);
    document.getElementById('s'+i).style.backgroundColor = color[getRndInteger(0,6)];
  }

  function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }

<span id="s1">s1</span>
<span id="s2">s2</span>
<span id="s3">s3</span>
<span id="s4">s4</span>

<span id="demo">Demo</span>