Javascript set variable with onclick

Question

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!

Each square will have a different id, such as B2, B3, B4, B5, I1, I2, etc.

Take care and have a great day....

ciao, john.

Could you maybe give a side-by-side of before-click and after-click ids? And you really should move away from in-line JavaScript and separate your model and behaviour (if only for future maintainability). — David Thomas
– David Thomas, Commented Mar 23, 2012 at 23:40
he id refers to a DOM element. What do you mean by "assign an initial value..." to it? — Hamish
– Hamish, Commented Mar 24, 2012 at 0:00

Robot Woods · Accepted Answer · 2012-03-24 21:21:06Z

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>

Travis J · Accepted Answer · 2012-03-23 23:41:55Z

0

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.

answered Mar 23, 2012 at 23:41

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

1 Comment

Mock26 Over a year ago

Sorry for the confusion. For each square I want a variable initially set at 0 (var B1 = 0;). When you click in the square the variable is incremented by +1.

Collectives™ on Stack Overflow

Javascript set variable with onclick

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related