João Mateus
João Mateus

Reputation: 115

changing id to populate html table

I'm trying to populate 10 frames from Html table with 2 values that come from two randomly generated numbers, play1 and play2, I can populate the first two spots but afterwords I cannot populate the rest as I'm failing to change the variables newId1 and 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>

How can I do this? I'm starting to think i'm overcomplicating this.

Upvotes: 0

Views: 84

Answers (4)

Mark
Mark

Reputation: 92440

I know this isn't really what you asked, but I'm posting anyway at the risk of getting downvoted. Any time you find yourself managing id names by concatenating a counter you need to ask yourself if you should be using an array. I think you absolutely should in this case because it will be much easier to manage your logic. I'm not 100% what the game is supposed to do, but it looks like you are keeping track of bowling scores. Consider something like this instead:

Fist, make your html look like this:

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

Now you can grab all of the <td> elements with document.querySelectorAll() and have them as an array.

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

So now the logic actually follows the logic of the game a little. The last frame, of course will require a little work, but if should be easier.There are probably even better variations, but the basic idea is to work with a list rather than manage string id names.

Upvotes: 1

Noni
Noni

Reputation: 369

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

Upvotes: 0

Dakota B
Dakota B

Reputation: 138

Your problem is in the line newId = "s1f"+frame;.

The variable newId has not been defined, and it's not referenced anywhere in the code except where you set it. Because of this, your code will only set the value for the default box (which you've designated as s1f1)

Change newId to newId1 and you should be good to go!

Upvotes: 1

niry
niry

Reputation: 3308

This is because you are changing newId (in newId = "s1f"+frame;) but you never use it. You only use newId1 and newId2.

Upvotes: 1

Related Questions