Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do i use the innerHTML property to write out the elements of an Array?

    I since i am told the document.write() method is should not be used for when the page is already loaded, i was wondering if there was a way of alter a script, in which instead of the write() method, i use the innerHTML.

    Here's the function as it is:

    Code:
    function writeWhiteChssGrp() {
    for( count = 0 ; count < whitePieces.opener.length ; count ++) {
    document.write(whitePieces[ count ]+ "<br>" );
    }
    }
    The above never really worked. But i am interested in doing something like the above, except with the innerHTML property. I know i will need to create a few div tags, and give them an id, for where the content will be displayed, but i am not sure how to modify the above. My guess is something like this,

    Code:
    function writeWhiteChssGrp() {
    
    var theTAG_ID;
    
    theTAG_ID=document.getElementByID( "myID-Tag" );
    
    for( count = 0 ; count < whitePieces.length ; count ++) {
    
    theTAG_ID.innerHTML = (whitePieces[ count ]+ "<br>" );
    }
    }
    Am i close?
    LovesWar

  • #2
    JPM
    JPM is offline
    Regular Coder
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    204
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This should work:

    Code:
    <html>
    <head>
    
    <script>
    
    var whitePieces = new Array()
    whitePieces[0] = "TEST"
    whitePieces[1] = "BLA"
    whitePieces[2] = "BLAH"
    
    function writeWhiteChssGrp() {
    
    var div
    
    div=document.getElementById("div");
    
    for( count = 0 ;count < whitePieces.length; count++) {
    div.innerHTML = div.innerHTML + whitePieces[count] + "<br>";
    }
    }
    
    </script>
    </head>
    
    <body onload="writeWhiteChssGrp()">
    
    <div id="div">
    
    </div>
    
    </body>
    You were close, but I think you spelled getElementById wrong,should be lowercase 'd'
    <JPM />

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thankz

    But out of curiousity, why the repeat?

    Code:
    div.innerHTML = div.innerHTML + whitePieces[count] + "<br>";
    Couldn't you just use div.innerHTML once?
    LovesWar

  • #4
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Odd, it only wrote wKing, but it didnt write the rest of the array.

    Code:
    //Creating a prototype:
    
    function chessModal(pieceName,pieceRank,pieceColor) {
    this.pieceName=pieceName;
    this.pieceRank=pieceRank;
    this.pieceColor=pieceColor;
    }
    The above is my prototype function.

    Code:
    //Instantiating the white power pieces:
    
    var wKing= new chessModal("wKing",15,"white");
    var wQueen=new chessModal("wQueen",12,"white");
    var wBishop01=new chessModal("wBishopOne",9,"white");
    var wBishop02=new chessModal("wBishopTwo",9,"white");
    var wKnight01=new chessModal("wKnightOne",9,"white");
    var wKnight02=new chessModal("wKnightTwo",9,"white");
    var wRook01=new chessModal("wRookOne",11,"white");
    var wRook02=new chessModal("wRookTwo",11,"white");
    
    //And now for the white pawns:
    
    var wPawn01=new chessModal("wPawn01",3,"white");
    var wPawn02=new chessModal("wPawn02",3,"white");
    var wPawn03=new chessModal("wPawn03",3,"white");
    var wPawn04=new chessModal("wPawn04",3,"white");
    var wPawn05=new chessModal("wPawn05",3,"white");
    var wPawn06=new chessModal("wPawn06",3,"white");
    var wPawn07=new chessModal("wPawn07",3,"white");
    var wPawn08=new chessModal("wPawn08",3,"white");
    The above tries to create different variables. And here's how i have grouped them:

    Code:
    //Grouping objects with an Array for the white pieces:
    
    var whitePieces=new Array(16);
    whitePieces[0]="wPawn01";
    whitePieces[1]="wPawn02";
    whitePieces[2]="wPawn03"; 
    whitePieces[3]="wPawn04";
    whitePieces[4]="wPawn05";
    whitePieces[5]="wPawn06";
    whitePieces[6]="wRook07";
    whitePieces[7]="wPawn08";
    whitePieces[8]="wRook01";
    whitePieces[9]="wRook02";
    whitePieces[10]="wKnight01";
    whitePieces[11]="wKnight02";
    whitePieces[12]="wBishop01";
    whitePieces[13]="wBishop02";
    whitePieces[14]="wQueen";
    whitePieces[15]="wKing";
    Is it because i am using quotes for a variable?
    LovesWar

  • #5
    JPM
    JPM is offline
    Regular Coder
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    204
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Couldn't you just use div.innerHTML once?
    Because you write the content in a loop you have to include div.innerhtml + .... If not it will first write myArray[0] , then overwrite that with myArray[1] and so on, instead of adding myArray[1] to myArray[0]
    <JPM />

  • #6
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    A shorter way would be to say:

    Code:
    document.getElementById('divID').innerHTML+=whitePieces[count] + "<br>";
    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #7
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why do i get this, as my result of my innerHTML?

    Code:
    [object Object]
    [object Object]
    [object Object]
    [object Object]
    [object Object]
    [object Object]
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined
    That's not what i was looking for.
    LovesWar

  • #8
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Can you post the whole code together? Or a link to it? Looks like you are passing objects and undefined variables to the array.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #9
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I thought i did?

    Code:
    <!--Start of Concealment.
    
    //Creating a prototype:
    
    function chessModal(pieceName,pieceRank,pieceColor) {
    this.pieceName=pieceName;
    this.pieceRank=pieceRank;
    this.pieceColor=pieceColor;
    }
    
    //Instantiating the black power pieces:
    
    var bKing= new chessModal("bKing",15,"black");
    var bQueen=new chessModal("bQueen",12,"black");
    var bBishop01=new chessModal("bBishopOne",9,"black");
    var bBishop02=new chessModal("bBishopTwo",9,"black");
    var bKnight01=new chessModal("bKnightOne",9,"black");
    var bKnight02=new chessModal("bKnightTwo",9,"black");
    var bRook01=new chessModal("bRookOne",11,"black");
    var bRook02=new chessModal("bRookTwo",11,"black");
    
    //And now for the black pawns:
    
    var bPawn01=new chessModal("bPawn01",3,"black");
    var bPawn02=new chessModal("bPawn02",3,"black");
    var bPawn03=new chessModal("bPawn03",3,"black");
    var bPawn04=new chessModal("bPawn04",3,"black");
    var bPawn05=new chessModal("bPawn05",3,"black");
    var bPawn06=new chessModal("bPawn06",3,"black");
    var bPawn07=new chessModal("bPawn07",3,"black");
    var bPawn08=new chessModal("bPawn08",3,"black");
    
    
    //Instantiating the white power pieces:
    
    var wKing= new chessModal("wKing",15,"white");
    var wQueen=new chessModal("wQueen",12,"white");
    var wBishop01=new chessModal("wBishopOne",9,"white");
    var wBishop02=new chessModal("wBishopTwo",9,"white");
    var wKnight01=new chessModal("wKnightOne",9,"white");
    var wKnight02=new chessModal("wKnightTwo",9,"white");
    var wRook01=new chessModal("wRookOne",11,"white");
    var wRook02=new chessModal("wRookTwo",11,"white");
    
    //And now for the white pawns:
    
    var wPawn01=new chessModal("wPawn01",3,"white");
    var wPawn02=new chessModal("wPawn02",3,"white");
    var wPawn03=new chessModal("wPawn03",3,"white");
    var wPawn04=new chessModal("wPawn04",3,"white");
    var wPawn05=new chessModal("wPawn05",3,"white");
    var wPawn06=new chessModal("wPawn06",3,"white");
    var wPawn07=new chessModal("wPawn07",3,"white");
    var wPawn08=new chessModal("wPawn08",3,"white");
    
    //Grouping objects with an Array for the black pieces:
    
    var blackPieces=new Array(16);
    blackPieces[0]="bPawn01";
    blackPieces[1]="bPawn02";
    blackPieces[2]="bPawn03"; 
    blackPieces[3]="bPawn04";
    blackPieces[4]="bPawn05";
    blackPieces[5]="bPawn06";
    blackPieces[6]="bRook07";
    blackPieces[7]="bPawn08";
    blackPieces[8]="bRook01";
    blackPieces[9]="bRook02";
    blackPieces[10]="bKnight01";
    blackPieces[11]="bKnight02";
    blackPieces[12]="bBishop01";
    blackPieces[13]="bBishop02";
    blackPieces[14]="bQueen";
    blackPieces[15]="bKing";
    
    //Grouping objects with an Array for the white pieces:
    
    var whitePieces=new Array(16);
    whitePieces[0]=wPawn01;
    whitePieces[1]=wPawn02;
    whitePieces[2]=wPawn03; 
    whitePieces[3]=wPawn04;
    whitePieces[4]=wPawn05;
    whitePieces[5]=wPawn06;
    whitePieces[6]=wRook07;
    whitePieces[7]=wPawn08;
    whitePieces[8]=wRook01;
    whitePieces[9]=wRook02;
    whitePieces[10]=wKnight01;
    whitePieces[11]=wKnight02;
    whitePieces[12]=wBishop01;
    whitePieces[13]=wBishop02;
    whitePieces[14]=wQueen;
    whitePieces[15]=wKing;
    That's in an external file.

    Code:
    function WhiteChssGrp() {
    
    var div;
    var count;
    
    div=document.getElementById("For_Whites");
    
    for( count = 0 ;count < whitePieces.length; count++) {
    div.innerHTML+= whitePieces[count] + "<br>";
    }
    }
    And this is how i call it:

    Code:
    <input type="button" value="white Pieces" onClick="WhiteChssGrp()";>
    LovesWar

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Change this:

    div.innerHTML+= whitePieces[count] + "<br>";

    to:

    div.innerHTML+= whitePieces[count].pieceName + "<br>";


    Change pieceName to whatever chessModal property you want to display in For_Whites div.

    And for the black pieces array, you have to remove the quotes around each element as you did in white pieces array.

    var blackPieces=new Array(16);
    blackPieces[0]="bPawn01";
    ...

    You're assigning an object variable not a literal string.

  • #11
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, so how do i get it to simply write all the elements of an array? The above seems for like a particular property of my costume object.
    LovesWar

  • #12
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind in the above. I think i just need to rethink of how to create my costume object. It works. Thank you for your debugging skills. Seems to display the contents of the properties pretty well. I guess i will need to really figure out how i will set it up to where i can use drop down lists for example to choose the property of an object, before the button is hit. My end goal is a chess Game. I am intrigued by the possibility.
    LovesWar

  • #13
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Speaking of Chess, does anyone here know how the pieces are rank? I cant seem to find anything that specifically relates to that. Most sites i get is on the basics, like what a piece is, and how it moves, but nothint specifically about ranking levels of the pieces of the value points that the pieces have.

    I found a cool link for anyone interested in chess:

    http://www.thechessstore.com/
    LovesWar

  • #14
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    ... there is no actual real rank to pieces, only rules of thumb to follow when you're not sure on exhanges. The most common being:
    Pawns = 1
    Knights = 3 (2.5 in the endgame)
    Bishops = 3
    Rooks = 5
    Queens = 9
    King = 0 (can't ever exchange a king)

  • #15
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the above. I used it on one of my scripts.
    LovesWar


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •