更改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。

Answer 2

您的问题在newId = "s1f"+frame; 。

变量newId尚未定义，在代码的任何地方（设置位置除外）都没有引用它。 因此，您的代码将仅设置默认框的值（您将其指定为s1f1 ）

将newId更改为newId1 ，您应该newId1顺利！

Answer 3

我知道这并不是您真正要求的，但是无论如何我都会张贴被投票的风险。 每当您发现自己通过连接一个计数器来管理ID名称时，都需要问自己是否应该使用数组。 我认为您绝对应该在这种情况下，因为管理逻辑会容易得多。 我不是100％应该做的事情，但是看起来您正在跟踪保龄球得分。 考虑这样的事情：

拳头，使您的html看起来像这样：

<td class="dd" colspan="3"></td>
<td class="dd" colspan="3"></td>

现在，您可以使用document.querySelectorAll()获取所有<td>元素，并将它们作为数组。

function r(min, max){
  return Math.floor(Math.random() * (max-min+1)) + min;
}
var min = 0;
var max = 10;
var roll = 0;
var frame = 0

var play;

var tds = document.querySelectorAll('.dd')

function myFunction() {
  var play = r(min, max);

  //figure out which element you should be writing to based on frame and roll number
  tds[frame * 2 + roll].innerHTML = play

// now the logic of the game is easy to understand

// if you roll a strike, go to the next frame:
  if (play === 10) {
    frame ++;
    roll = 0
    return
  }

  // first roll? stay in the same frame, go to roll two
  if (roll == 0) {
    //you can't roll more than the number of pins
    max = max - play
    roll ++
    return 
  }

  // otherwise reset and go to the next frame
  max = 10
  roll = 0
  frame++
}

因此，现在的逻辑实际上跟游戏逻辑有些相似。 最后一帧当然需要一些工作，但是如果需要的话应该会更容易。可能会有更好的变化，但是基本思想是使用列表而不是管理字符串ID名称。

Answer 4

  <script>
  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 = "s1f";
  var newId2 = "s2f";

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

    }
    else if (controlVariable == 2) {
      play2 = r(min, max - (play1-min));
      controlVariable = 1;
      // add value to second spot
      document.getElementById(newId2).innerHTML = play1;
      frame++;
    }

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