CODEWITHSUNDEEP
javascript
Mock26
Mock26

Reputation: 71

Javascript set variable with onclick

I am working on a dynamic bingo game that randomly generates the number in each bingo square and when you click on a square it will change color. This I have accomplished. I created a table and within each TD I have the following code:

 <td onclick="javascript:this.style.background = '#00ff00';"    
 id="B1" class="bingo1"><script>document.write(patty[0]);</script></td>

When the page is loaded each square (td) will have a variable that is initially set to 0 (var B1 = 0;). When you click in the square the variable is increased to 1, but I have no idea how to do this. I thought that maybe it could be done with the onclick event or maybe it would detect when the background color changes. But, as I said, I have no idea how to do either of these. Any and all help would be greatly appreciated. Thanks!

Take care and have a great day....

ciao, john.

Upvotes: 0

Views: 2120

Answers (2)

Robot Woods
Robot Woods

Reputation: 5687

I would just have a two dimensional array, (5x5) all set to zeros (aside the free space, which is set to 1), and then the individual cells are buttons to change some array value to 1.

like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bingo</title>
<style>
#card {width:510px; margin-right:auto; margin-left:auto; position:relative; }
.top {border: thin #000 solid; float:left; width:100px; height:20px; text-align:center;}
.cell {border: thin #000 solid; float:left; width:100px; height:60px;text-align:center;padding-top:40px;}
.on {border: thin #000 solid; float:left; width:100px; height:60px; background-color:#0F0;text-align:center;padding-top:40px;}
.win {border: thin #000 solid; float:left; width:100px; height:60px; background-color:#F00;text-align:center;padding-top:40px;}
</style>
</head>

<body>
<div id="card"><div class="top">B</div><div class="top">I</div><div class="top">N</div><div class="top">G</div><div class="top">O</div></div>
</body>
<script type="text/javascript">
var score=new Array();
var existingNumbers=new Array();
var r,c;
for(r=0;r<5;r++){
    for(c=0;c<5;c++){
        score[r]=Array();
        score[r][c]=0;
        if((c==2)&&(r==2)){
            score[r][c]=1;
            document.getElementById('card').innerHTML+='<div id="cell'+r+c+'" class="on">FREE</div>';
        }
        else{
            document.getElementById('card').innerHTML+='<div id="cell'+r+c+'" class="cell" onclick="tap('+r+','+c+');">'+number(c)+'</div>';    
        }
    }
    document.body.innerHTML+='<br/>';
}

function number(col){
    var num=Math.ceil(Math.random()*15)+(15*col);
    while(existingNumbers.indexOf(num)!=-1){
        num=Math.ceil(Math.random()*15)+(15*col);
    }
    existingNumbers.push(num);
    return num;
}

function tap(r,c){
    document.getElementById('cell'+r+c).className="on";
    score[r][c]=1;
    winTest();
}

function winTest(){
    //there has got to be a more concise way of doing this, but right now it's just for function
    var winner=false;
    r1=score[0][0]+score[1][0]+score[2][0]+score[3][0]+score[4][0];
    r2=score[0][1]+score[1][1]+score[2][1]+score[3][1]+score[4][1];
    r3=score[0][2]+score[1][2]+1+score[3][2]+score[4][2];
    r4=score[0][3]+score[1][3]+score[2][3]+score[3][3]+score[4][3];
    r5=score[0][4]+score[1][4]+score[2][4]+score[3][4]+score[4][4];
    c1=score[0][0]+score[0][1]+score[0][2]+score[0][3]+score[0][4];
    c2=score[1][0]+score[1][1]+score[1][2]+score[1][3]+score[1][4];
    c3=score[2][0]+score[2][1]+1+score[2][3]+score[2][4];
    c4=score[3][0]+score[3][1]+score[3][2]+score[3][3]+score[3][4];
    c5=score[4][0]+score[4][1]+score[4][2]+score[4][3]+score[4][4];
    d1=score[0][0]+score[1][1]+1+score[3][3]+score[4][4];
    d2=score[0][4]+score[1][3]+1+score[3][1]+score[4][0];
    if(r1==5){
        document.getElementById('cell00').className="win";
        document.getElementById('cell10').className="win";
        document.getElementById('cell20').className="win";
        document.getElementById('cell30').className="win";
        document.getElementById('cell40').className="win";
        winner=true;
    }
    if(r2==5){
        document.getElementById('cell01').className="win";
        document.getElementById('cell11').className="win";
        document.getElementById('cell21').className="win";
        document.getElementById('cell31').className="win";
        document.getElementById('cell41').className="win";
        winner=true;
    }
    if(r3==5){
        document.getElementById('cell02').className="win";
        document.getElementById('cell12').className="win";
        document.getElementById('cell22').className="win";
        document.getElementById('cell32').className="win";
        document.getElementById('cell42').className="win";
        winner=true;
    }
    if(r4==5){
        document.getElementById('cell03').className="win";
        document.getElementById('cell13').className="win";
        document.getElementById('cell23').className="win";
        document.getElementById('cell33').className="win";
        document.getElementById('cell43').className="win";
        winner=true;
    }
    if(r5==5){
        document.getElementById('cell04').className="win";
        document.getElementById('cell14').className="win";
        document.getElementById('cell24').className="win";
        document.getElementById('cell34').className="win";
        document.getElementById('cell44').className="win";
        winner=true;
    }
    if(c1==5){
        document.getElementById('cell00').className="win";
        document.getElementById('cell01').className="win";
        document.getElementById('cell02').className="win";
        document.getElementById('cell03').className="win";
        document.getElementById('cell04').className="win";
        winner=true;
    }
    if(c2==5){
        document.getElementById('cell10').className="win";
        document.getElementById('cell11').className="win";
        document.getElementById('cell12').className="win";
        document.getElementById('cell13').className="win";
        document.getElementById('cell14').className="win";
        winner=true;
    }
    if(c3==5){
        document.getElementById('cell20').className="win";
        document.getElementById('cell21').className="win";
        document.getElementById('cell22').className="win";
        document.getElementById('cell23').className="win";
        document.getElementById('cell24').className="win";
        winner=true;
    }
    if(c4==5){
        document.getElementById('cell30').className="win";
        document.getElementById('cell31').className="win";
        document.getElementById('cell32').className="win";
        document.getElementById('cell33').className="win";
        document.getElementById('cell34').className="win";
        winner=true;
    }
    if(c5==5){
        document.getElementById('cell40').className="win";
        document.getElementById('cell41').className="win";
        document.getElementById('cell42').className="win";
        document.getElementById('cell43').className="win";
        document.getElementById('cell44').className="win";
        winner=true;
    }
    if(d1==5){
        document.getElementById('cell00').className="win";
        document.getElementById('cell11').className="win";
        document.getElementById('cell22').className="win";
        document.getElementById('cell33').className="win";
        document.getElementById('cell44').className="win";
        winner=true;
    }
    if(d2==5){
        document.getElementById('cell04').className="win";
        document.getElementById('cell13').className="win";
        document.getElementById('cell22').className="win";
        document.getElementById('cell31').className="win";
        document.getElementById('cell40').className="win";
        winner=true;
    }
    if(winner){
        alert('You WIN!!');
    }
}
</script>
</html>

Upvotes: 2

Travis J
Travis J

Reputation: 82287

To change the id you can use:

<td onclick="javascript:this.style.background = '#00ff00';this.id = 'newId';"    
 id="B1" class="bingo1"><script>document.write(patty[0]);</script></td>

Is that was you were after? If not, can you please edit your question to be more direct.

Upvotes: 0

Related Questions