...

View Full Version : How do i use the innerHTML property to write out the elements of an Array?



SpiritualStorms
07-18-2004, 08:50 AM
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:


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,


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?

JPM
07-18-2004, 12:32 PM
This should work:


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

SpiritualStorms
07-18-2004, 12:38 PM
But out of curiousity, why the repeat?


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

Couldn't you just use div.innerHTML once?

SpiritualStorms
07-18-2004, 12:54 PM
Odd, it only wrote wKing, but it didnt write the rest of the array.


//Creating a prototype:

function chessModal(pieceName,pieceRank,pieceColor) {
this.pieceName=pieceName;
this.pieceRank=pieceRank;
this.pieceColor=pieceColor;
}

The above is my prototype function.


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


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

JPM
07-18-2004, 01:36 PM
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]

Basscyst
07-18-2004, 05:48 PM
A shorter way would be to say:



document.getElementById('divID').innerHTML+=whitePieces[count] + "<br>";


Basscyst

SpiritualStorms
07-18-2004, 07:10 PM
Why do i get this, as my result of my innerHTML?


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

Basscyst
07-18-2004, 07:24 PM
Can you post the whole code together? Or a link to it? Looks like you are passing objects and undefined variables to the array. :p

Basscyst

SpiritualStorms
07-22-2004, 05:24 AM
I thought i did?


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


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:


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

glenngv
07-22-2004, 05:46 AM
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.

SpiritualStorms
07-22-2004, 09:12 PM
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.

SpiritualStorms
07-22-2004, 09:32 PM
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.

SpiritualStorms
07-23-2004, 02:10 AM
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/

jkd
07-23-2004, 05:38 AM
... 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)

SpiritualStorms
07-28-2004, 12:23 PM
Thank you for the above. I used it on one of my scripts.

SpiritualStorms
07-28-2004, 12:37 PM
Since my following question relates to the issue of Chess, i thought i'd ask the following: How do i use a text box to display the individual items of an array? I have a text box, and a button. The button is used to call the function naturally. The problem is, that it doesnt work. Here's inspirataion for the script:


indexNumb = 0;

function GetSeasons () {

superHeros = new Array();

superHeros[0] = "Batman"
superHeros[1] = "Spiderman"
superHeros[2] = "Green Lantern"
superHeros[3] = "Flash"
superHeros[4] = "Wonderwoman"
superHeros[5] = "Catwoman"
superHeros[6] = "Superman"
superHeros[7] = "the Hulk"

document.frmOne.txtData.value = superHeros[indexNumb]

inc++;

if (indexNumb > 7) {indexNumb = 0};

}

It looks like a rather self-explantory piece, right? Well, i tried modifying the above to fit a different case, and things didnt pan as hoped. Here's the case to which i tried fitting the above:


var indexNumb=0;

function WhiteArrayGroup() {

document.frmOne.txtData.value =

whitePieces[indexNumb].pieceName;

inc++;

if (indexNumb > 15) {indexNumb = 0};
}

Here's the form set up:


<form name="frmOne">

<input type="text" name="txtData" value="">

<input type="button" value="white Pieces"

onClick="WhiteArrayGroup() ">
<br>

What am i doing wrong? No matter how many times i press the button, to go through an array, no actual content is displayed in the text field.

glenngv
07-28-2004, 03:29 PM
When you alert the content, do you see something?


function WhiteArrayGroup() {
alert("whitePieces[" + indexNumb + "].pieceName = " + whitePieces[indexNumb].pieceName);
document.frmOne.txtData.value = whitePieces[indexNumb].pieceName;
...
}

dumpfi
07-28-2004, 04:30 PM
var indexNumb=0;
function WhiteArrayGroup() {
document.frmOne.txtData.value =
whitePieces[indexNumb].pieceName;
indexNumb++
if(indexNumb > 15) indexNumb = 0;
}dumpfi

SpiritualStorms
07-29-2004, 01:16 AM
To Glen:

I've tried including your alert part, but nothing is alerted. Well, Mozilla Firefox (or crap-Zilla) is just as much a joke as regular IE. At any rate, i cant go through the individual elements of an array. The goal was simple: click a button, and boom, in a text field, you see content; click the button again, and boom, the next item in the array is displayed. Keep pressing the button, and you will go through a whole array. This is how i had it with the superheros function, and that too doesnt work with FireFox.

SpiritualStorms
07-29-2004, 01:19 AM
To dumpfi:

I tried that too, but still no green lights.

glenngv
08-03-2004, 03:49 AM
To Glen:

I've tried including your alert part, but nothing is alerted.
If nothing is alerted, it means that the pieceName property is not set.
Do you get any error? See the Javascript Console in Firefox (Tools -> Javascript Console or simply typing javascript: in the address bar)

SpiritualStorms
08-03-2004, 06:19 AM
Thankz. I clicked on the little yellow triangle at the area they call the status bar, and it launched a small debugging screen/window. It told me that one of the variables was basically undefined. I simply had to rename my variable from wRook01 to wPawn07. I thought it was odd that it would tell me that something was undefined.

Anyways, i can run through both of my arrays using 2 totally different buttons, and 2 totally different text boxes. I am pretty impressed, if i do say myself. I still need to fix it though for more flexability.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum