javascript - 与 Javascript 数组中的按钮值对话

标签 javascript arrays button

我在考虑讨论按钮的值时遇到了问题。只是为了让您更好地理解我的目标,我将在这里发布我的整个代码和“问题代码”的含义:

for(i=0;i<144;i++){

    if(i%12 <= 10 && i%12 >= 1 && Math.floor(i/12) >= 1 && Math.floor(i/12) <= 10) {

        window.alert(change.button+i.value);
        if(change.button+i.value==0 && change.button+i.className=='revealed') {

            change.button+(i-1).className='revealed';
            change.button+(i+1).className='revealed';
            change.button+(i-11).className='revealed';
            change.button+(i-12).className='revealed';
            change.button+(i-13).className='revealed';
            change.button+(i+11).className='revealed';
            change.button+(i+12).className='revealed';
            change.button+(i+13).className='revealed';
            alert.writeln("test");
        }
    }
}

所以我写了一个简单的扫雷代码。效果很好,但我想通过显示一个按钮周围的区域(如果它的值为“0”)来改进它。另外,我应该承认数组的大小为 144,但我只会显示 100 个元素,因此我有一个不可见的边框。 现在又回到这个问题了。我想在每次单击按钮时进行扫描。因此,我检查每个按钮的值是否“显示”并且其值为“0”。我的问题是,我试图与之交谈的方式是错误的,但你可能会理解我想要达到的目标。所以这是我的代码,如果你能帮助我,我会很高兴:) *注意忽略 dbclick,这不起作用

<html>
<head>
    <title>Einfachsweeper</title>
    <style>
        .revealed{color:blue;}
        .invisible{color:transparent}
        .fahne{background-color:blue;color:transparent;}
    </style>
    <script language="Javascript">
        feld3 = [];
        minen=12;
        feld2 = [];
        for(y=0;y<=11;y++){
            feld3[y]=[];
            for(x=0;x<=11;x++){
                feld3[y][x]=0;
            }
        }
        for(y=0;y<=11;y++){
                for(x=0;x<=11;x++){
                    //document.writeln(+feld3[y][x]+" ");
                }   
            }
        for(i=1;i<=minen;i++){
            randz=Math.random();
            randz=Math.floor(randz*100);
            randx=randz%10+1;
            randy=Math.floor(randz/10)+1;
            //document.writeln(randy + " " + randx + ",");
            if(feld3[randy][randx]==0){
                //document.writeln("test");
                feld3[randy][randx]='x';
            }
            else{
                //document.writeln("test");
                i--;
            }
        }
        for(y=1;y<=10;y++){
                for(x=1;x<=10;x++){
                    wert=0;
                    if(feld3[y][x]!='x'){
                        if(feld3[y-1][x-1]=='x'){
                            wert++;
                        }
                        if(feld3[y-1][x]=='x'){
                            wert++;
                        }
                        if(feld3[y-1][x+1]=='x'){
                            wert++;
                        }
                        if(feld3[y][x+1]=='x'){
                            wert++;
                        }
                        if(feld3[y+1][x+1]=='x'){
                            wert++;
                        }
                        if(feld3[y+1][x]=='x'){
                            wert++;
                        }
                        if(feld3[y+1][x-1]=='x'){
                            wert++;
                        }
                        if(feld3[y][x-1]=='x'){
                            wert++;
                        }
                        feld3[y][x]=wert;
                    }
                }   
            }
        i=0;
        while(i<144){
            for(y=0;y<=11;y++){
                for(x=0;x<=11;x++){
                    feld2[i]=feld3[y][x];
                    i++;
                }   
            }
        }



        document.writeln("<form method='post' name='change' action='bla.html'><table border='1'><tr>");
        for(i=0;i<144;i++){
            if(i%12<=10 && i%12>=1 && Math.floor(i/12)>=1 && Math.floor(i/12)<=10){
                document.writeln("<td><input class='invisible' type='button'  name='button"+i+"' value='"+feld2[i]+"' onDblClick='right(this)' onClick='changer(this)'></td>");
            }
            if(i%12==11){
                document.writeln("</tr><tr>");
            }
        }
        document.writeln("</tr></table>");

        function right(item){
            item.className='fahne';
            window.alert('works');
        }

        function changer(item){
            //window.alert(item.name);
            i=21;
        //  window.alert(change.button+i.value);
            /*for(i=0;i<144;i++){
                if(i%12<=10 && i%12>=1 && Math.floor(i/12)>=1 && Math.floor(i/12)<=10){
                    window.alert(change.button+i.value);
                    if(change.button+i.value==0 && change.button+i.className=='revealed'){
                        change.button+(i-1).className='revealed';
                        change.button+(i+1).className='revealed';
                        change.button+(i-11).className='revealed';
                        change.button+(i-12).className='revealed';
                        change.button+(i-13).className='revealed';
                        change.button+(i+11).className='revealed';
                        change.button+(i+12).className='revealed';
                        change.button+(i+13).className='revealed';
                        alert.writeln("test");
                    }
                }
            }*/
            if(item.which == 3){
                window.alert('right');
            }
            if(item.value=='x'){
                window.alert('You lost!');
            }
            //window.alert(item.value);
            item.className="revealed";
            //document.writeln(item);
        }

    </script>
</head>
<body>
    <!--<input type='button' name='invisible' value=' ' onClick="changer()">
    <input type='button' name='test' value=' '></form>-->
</body>
</html>

最佳答案

此行和其他类似行有语法错误:

change.button+(i-1).className='revealed';
//     ^^^^^^^^^^^^

change自动全局具有每个按钮的自动属性;这些属性的名称为 button0button2 等。

因此,要使用 i = 0 访问 button0,您可以使用括号表示法和字符串连接:

change["button" + (i-1)].className='revealed';
<小时/>

您的代码依赖于浏览器创建自动全局变量 change,因为您已使用 name="change"创建了一个 form 元素。它还依赖于该表单对象获取其字段的自动属性,因为您已经在它们上使用了 name="button0" 等。

我不建议依赖其中任何一个。相反,有意识地查找表格:

var change = document.querySelector("form[name=change]");

并有意地从中获取按钮:

var buttons = change.querySelectorAll("input[type=button]");

buttons 将是按文档顺序排列的按钮数组。要通过列表中的索引访问按钮,您可以使用 buttons[i]。所以:

buttons[i-1].className='revealed';

FWIW。

关于javascript - 与 Javascript 数组中的按钮值对话,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25156091/

相关文章:

javascript - Font-Awesome 图标,带有 onclick 事件集

javascript - 请求 promise 实现返回 `null`

jquery - 有什么方法可以使 jQuery.inArray() 不区分大小写吗?

javascript - 对 url 进行编码并在 iframe 中显示

javascript - 如何使用 backbone.js 路由触发 JavaScript 函数

javascript - 具有相同 CSS 和 JS 的 2 个按钮不起作用。

wpf - 为什么 WPF 主题不使用 SystemColors?

c# - 如何设置从代码应用了样式的按钮的背景颜色?

javascript - puppeteer 获取 href 数组,然后遍历每个 href 和该页面上的 href

javascript - 以允许 JS 区分它们的方式在 PHP 中创建 "objects"和 "arrays"