Talking to button values in an array Javascript

Question

I got a problem concidering talking to the value of a button. Just for you to maybe understand my target a little bit better, I will post my whole code and the sence of my 'problemcode' right here:

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");
        }
    }
}

So I wrote a simple Minesweeper code. Works pretty good but I wanted to improve it by revealing the area around one button if it has the value '0'. Additionally I should admit that the array has the size of 144 but I will only show 100 elements, so I have an invisible boarder. Now again coming to the problem. I want to do a scan everytime a button got clicked. So I check the value of every button if it is 'revealed' and it's value is '0'. My problem here though is that the way I try to talk to it is wrong, but you may understand what I am trying to reach. So here is my code, I would appreachead if you might help me :) *note ignore the dbclick, this does not work

<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>

T.J. Crowder · Accepted Answer · 2014-08-06 09:10:34Z

2

This line and the others like it have a syntax error:

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

The change automatic global has automatic properties for each button; the names of those properties are button0, button2, etc.

So to access button0 using i = 0, you use bracketed notation and string concatenation:

change["button" + (i-1)].className='revealed';

Your code is relying on the browser creating an automatic global variable, change, because you've created a form element with name="change". It's also relying on that form object getting automatic properties for its fields because you've used name="button0" and such on them.

I wouldn't recommend relying on either of those things. Instead, look up the form intentionally:

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

and get the buttons from it intentionally:

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

buttons will be an array of the buttons in document order. To access a button by its index in that list you'd use buttons[i]. So:

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

FWIW.

edited Aug 6, 2014 at 9:10

answered Aug 6, 2014 at 9:02

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

FrontMobe Over a year ago

If I want to do it your way, what is the value and className of the buttons?

T.J. Crowder Over a year ago

It's the same object, so .value and .className.

FrontMobe Over a year ago

Yes thats how you talk to it but what is the 'default' value if I check with e.g. writeln(button0.value); ?

T.J. Crowder Over a year ago

I'm sorry, I have no idea what you're asking.

FrontMobe Over a year ago

So if I got you right I should be able to create a field of '0' by this: (doesn't work + sorry for formation) ` var change = document.querySelector("form[name=change]"); var buttons = change.querySelectorAll("input[type=button]"); document.writeln("<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){ buttons[i].value=0; document.writeln("<td>'".buttons[i].value."'</td>"); } if(i%12==11){ document.writeln("</tr><tr>"); } } document.writeln("</tr></table>");`

|

Collectives™ on Stack Overflow

Talking to button values in an array Javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related