Reputation: 115
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
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
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
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
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