Question

我试图从Html表中填充10个帧，其中2个值来自两个随机生成的数字，play1和play2，我可以填充前两个点但是后面我不能填充其余的，因为我＆＃39; m未能更改变量newId1和newId2。

＆＃13;

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];
}

＆＃13;

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

＆＃13;

 

<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>

＆＃13;

我该怎么做？我开始认为我过度复杂了。

Answer 1

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

Answer 2

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

变量newId尚未定义，除了您设置之外，它在代码中的任何位置都没有引用。因此，您的代码只会设置默认框的值（您指定为s1f1）

将newId更改为newId1，你应该好好去！

Answer 3

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

拳头，让你的HTML看起来像这样：

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

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

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>

更改id以填充html表

4 个答案: