javascript - 更改 id 以填充 html 表

Question

我正在尝试使用来自两个随机生成的数字 play1 和 play2 的 2 个值填充 Html 表中的 10 个帧，我可以填充前两个点，但事后我无法填充其余部分，因为我无法更改变量 newId1 和 newId2。

var controlVariable = 1;

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

var min = 0;
var max = 10;
var play1;
var play2;
var frame = 1; 
var newId1 = "s1f1";
var newId2 = "s2f1";

function myFunction() {
  if (controlVariable == 1) {
    play1 = r(min, max);
    if(play1 === 10) {
      // add value to first spot 
      newId1 = "s1f" + frame;
      document.getElementById(newId1).innerHTML = play1;
      frame++; 
    } else {
      //add value to first spot
      document.getElementById(newId1).innerHTML = play1;
      controlVariable++; 
    }
     
  }
  else if (controlVariable == 2) { 
    play2 = r(min, max - (play1-min));
    controlVariable = 1;
    // add value to second spot
    newId2 = "s2f"+frame; 
    document.getElementById(newId2).innerHTML = play2;
    frame++;
  }

  document.getElementById("demo").innerHTML = [play1, play2];
}

table, th, td {
    border: 1px solid black;
    padding: 15px;
}

 

<table>
  <tr>
    <td colspan="6">Frame 1</td>
    <td colspan="6">Frame 2</td>
    <td colspan="6">Frame 3</td>
    <td colspan="6">Frame 4</td>
    <td colspan="6">Frame 5</td>
    <td colspan="6">Frame 6</td>
    <td colspan="6">Frame 7</td>
    <td colspan="6">Frame 8</td>
    <td colspan="6">Frame 9</td>
    <td colspan="6">Frame 10</td>
  </tr>
  <tr>
    <td colspan="3" id="s1f1"></td>
    <td colspan="3" id="s2f1"></td>
    <td colspan="3" id="s1f2"></td>
    <td colspan="3" id="s2f2"></td>
    <td colspan="3" id="s1f3"></td>
    <td colspan="3" id="s2f3"></td>
    <td colspan="3" id="s1f4"></td>
    <td colspan="3" id="s2f4"></td>
    <td colspan="3" id="s1f5"></td>
    <td colspan="3" id="s2f5"></td>
    <td colspan="3" id="s1f6"></td>
    <td colspan="3" id="s2f6"></td>
    <td colspan="3" id="s1f7"></td>
    <td colspan="3" id="s2f7"></td>
    <td colspan="3" id="s1f8"></td>
    <td colspan="3" id="s2f8"></td>
    <td colspan="3" id="s1f9"></td>
    <td colspan="3" id="s2f9"></td>
    <td colspan="2" id="s1f10"></td>
    <td colspan="2" id="s2f10"></td>
    <td colspan="2" id="s3f10"></td>
  </tr>
  <tr>
    <td colspan="6"></td>
    <td colspan="6"></td>
    <td colspan="6"></td>
    <td colspan="6"></td>
    <td colspan="6"></td>
    <td colspan="6"></td>
    <td colspan="6"></td>
    <td colspan="6"></td>
    <td colspan="6"></td>
    <td colspan="6"></td>
  </tr>
</table>

<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

我该怎么做？我开始认为我把这件事过于复杂化了。

Answer 1

这是因为您正在更改 newId(在 newId = "s1f"+frame; 中)，但您从未使用过它。您仅使用 newId1 和 newId2。