堆栈内存溢出
  简体   繁体   English

Javascript设置变量与onclick

[英]Javascript set variable with onclick

 原文  2012-03-23 23:38:01  0   2    javascript

问题描述

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中我有以下代码： 

 <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;). 加载页面时，每个方块（td）将有一个最初设置为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. 当您在方块中单击时，变量将增加到1，但我不知道如何执行此操作。 I thought that maybe it could be done with the onclick event or maybe it would detect when the background color changes. 我想也许可以通过onclick事件来完成，或者可能会检测到背景颜色何时发生变化。 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. 每个方块将具有不同的ID，例如B2，B3，B4，B5，I1，I2等。

Take care and have a great day.... 保重，祝大家愉快....

ciao, john. 乔，约翰。

2 个解决方案

解决方案1
 2 已采纳  2012-03-24 15:55:44

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. 我只有一个二维数组，（5x5）全部设置为零（除了自由空间，设置为1），然后单个单元格是按钮将一些数组值更改为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>

解决方案2
 0  2012-03-23 23:41:55

To change the id you can use: 要更改您可以使用的ID： 

<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. 如果没有，你能否编辑你的问题更直接。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 用onclick改变Javascript变量 - Javascript variable change with onclick Javascript onclick更改变量 - Javascript onclick change the variable JavaScript onclick变量不起作用 - Javascript onclick variable not working 通过onclick更改Javascript变量 - Change Javascript variable by onclick Javascript 用 onClick 更新变量 - Javascript update variable with onClick 内联onclick JavaScript变量 - Inline onclick JavaScript variable JavaScript onClick属性转换为变量 - JavaScript onClick attribute into variable 使用JavaScript检索onclick中的变量 - Retrieving variable in onclick with javascript 如何用JavaScript设置onClick？ - How to set onClick with JavaScript? 设置onclick <a>使用javascript</a> - Set onclick of <a> using javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM