div elements & its length

[nitin.randive]

Hi Gurus !

I am an iPhone developer.
I have an xml file called game.xml

The structure is as follows:-

<?xml version="1.0" encoding="iso-8859-1"?>
<games>


<game>
<question>question1</question>
<answer>answer1</answer>
</game>

<game>
<question>question2</question>
<answer>answer2</answer>
</game>

<game>
<question>question3</question>
<answer>answer3</answer>
</game>

</games>


1. Am displaying questions in my page & for answers -> I have created Div elements & my own keyboard from where the user selects the key to insert the correct answer

2.This is how I have created the div for each character in answer node

for(j=0;j<arr[i][1].length;j++)
{
var ind2 = eval(j+1);
gameVar+="<td> <div name=\"ans"+ind1+"_"+ind2+"\" id=\"ans"+ind1+"_"+ind2+"\" width=\"45px\" height=\"45px\" STYLE=\"position:relative; overflow:hidden; left:"+left2+"px; border-style:solid; border-color:#999999 \" onClick=\"focuset('"+ind1+"',id);\" onKeyUp=\"OnKeyPress(this, event ,i);\" onFocus=\"focuset('"+ind1+"',id);\" onKeyPress=\"if (event.keyCode==8){removeTextById(id)} \">&nbsp;&nbsp;&nbsp;</div></td>";
left2=left2+5;
}

3. My problem is that am not able to get the total no. of div elements created (each character div)

m using (document.game.elements.length) to find out the length of my answer char div which is actually 21

answer1 = 7
answer2 = 7
answer3 = 7 i.e 21

4. Can somebody help me how do I get the total no of DIV element using JavaScript

[PeejAvery]

Instead, you should use document.getElementsByTagName('div'). That will return an array of all the div elements. Then you can just use the length property.

[nitin.randive]

ok fine thanks
I solved it !

Now pls have a look at this..


for(j=0;j<arr[i][1].length;j++)
{
var ind2 = eval(j+1);
gameVar+="<td> <div tabindex=\""+eval(++tabIndVal)+"\" name=\"ans"+ind1+"_"+ind2+"\" id=\"ans"+ind1+"_"+ind2+"\" width=\"45px\" height=\"45px\" STYLE=\"position:relative; overflow:hidden; left:"+left2+"px; border-style:solid; border-color:#999999 \" onClick=\"focuset('"+ind1+"',id);\" onKeyUp=\"OnKeyPress(this, event ,i);\" onFocus=\"focuset('"+ind1+"',id);\" onKeyPress=\"if (event.keyCode==8){removeTextById(id)} \">&nbsp;&nbsp;&nbsp;</div></td>";
left2=left2+5;
}


I had given tabindex value to my div & now I want value of tabindex which I am tring to get it this way as below


alert(document.getElementById(divName).tabindex);


Am getting values as "undefined"

Please help.

[PeejAvery]

Well, where have you declared divName? Also, I believe that tab indexes only work input elements (input & textarea).

[nitin.randive]

Well its not divName ..it is divId which is the ID which am giving to the div..

For eg:-

alert(document.getElementById("ans"+ind1+"_"+ind2).tabindex);


About the tabindex ..I also have a doubt if it works with DIV element
Anyway is there any solution where in I could get the tabIndex

or anyother property similar to that

Thanks

[PeejAvery]

Notice that the I is capitalized. So the following code should work.

alert(document.getElementById("ans"+ind1+"_"+ind2).tabIndex);

BTW...According to Microsoft the div elements have a tab index.

[nitin.randive]

1. Actually I am implementing this for Safari Browser and I guess DIV tabIndex is not supported by Safari
cos still am getting the result as "undefined" with the alert you mentioned above

2. I am setting a char to the divs using innerHTML as below
There are 'n' no of divs


document.getElementById(divId).innerHTML="&nbsp;"+kid+"&nbsp;";



where 'kid' is the key selected by user

Now here, I ant to get those divs whose innerHTML="" i.e div which has no char set into it as innerHTML

I am tring to identiy such divs like below but unable to get them


if(document.getElementById(divId).innerHTML=="none")
{
alert("no character")
}


I have also tried as below

if(document.getElementById(divId).innerHTML=="")
{
alert("no character")
}

How do I identify such divs ?
Please help..

[PeejAvery]

I too am a Safari user. Div elements do have a tabIndex if you set them, else they will return undefined. You can see that with the following code.

<div id="test">&nbsp;</div>

<script type="text/javascript">
alert(document.getElementById('test').tabIndex); // returns undefined
document.getElementById('test').tabIndex = 5;
alert(document.getElementById('test').tabIndex); // returns 5
</script>

To get all the empty div elements, you can use the following.

var divs = document.getElementsByTagName('div');
for (i = 0; i < divs.length; i++) {
if (divs[i].innerHTML == '') {
// this is an empty div
}
}

[nitin.randive]

Thanks !
I was able to give tabIndex to my divs !

[nitin.randive]

Well the problem of identifying the div with some space is bugging me a lot
This is how I put a space into my div :-

Here divId is the ID given to my div element

document.getElementById(divId).innerHTML = '&nbsp';


and now am not able to find this div for which I am using the code as below

if(document.getElementById(divId).innerHTML==' ') //fails
{
// some action
}


When I use some value instead of &nbsp, I am able to find it
for eg:-

document.getElementById(divId).innerHTML = '0';

if(document.getElementById(divId).innerHTML=='0') // succesful
{
//some action
}


but I dont want to use the above ..I want to put some space into my div and then identify the empty divs (with space)

Please help me..its urgent

[PeejAvery]

Space and &nbsp; are not the same thing, so that code will fail anyway. &nbsp; is an html entity which makes the browser believe there is a space there and should not break. If you are looking for &nbsp; you must search for it, not a space.

[nitin.randive]

oh ok
but still as u said I tried out searching for &nbsp for I havent got any results

Here are the details:-

document.getElementById(divId).innerHTML = '&nbsp;&nbsp;&nbsp;';

if (document.getElementById(divId).innerHTML=='&nbsp;&nbsp;&nbsp;')
{
// some action
}


Even this is not working
Whats wrong ??
Please help

[PeejAvery]

It works for me. Are you sure you aren't calling this before the div is loaded by the browser? Check the Error Console using Firefox to see.

[nitin.randive]

Oh !
Its working fine with firefox
n not with safari

Any comments

[PeejAvery]

Ah yes. I forgot you were a Safari user. The problem here is that Safari treats it completely differently. You can see that by my test script below.

<div id="test"></div>
<div id="test2" style="border: 1px solid #000000"></div>

<script type="text/javascript">
document.getElementById('test').innerHTML = '&nbsp;&nbsp;&nbsp;';
if (document.getElementById('test').innerHTML == '&nbsp;&nbsp;&nbsp;') {
alert('HTML Entity');
}
if (document.getElementById('test').innerHTML == ' ') {
alert('Space');
}
else {
alert('"' + document.getElementById('test').innerHTML + '"');
// even copying this does not return true
document.getElementById('test2').innerHTML = document.getElementById('test').innerHTML;
}
</script>

Is this still part of finding the "empty" div tags? If so...I think your only way around this would be to use regular expressions.

[nitin.randive]

yes..
am finding the empty div tags
the way you specified is correct but its not giving me the empty divs
its doesnt go inside the for loop for both [space] and &nbsp

well how can we approach thru RE
Give some eg for finding empty div element

[PeejAvery]

Please remember to do some searching for yourself as well. I wrote this rather quickly...but there are many other sites which would have taught you how to do the same.

<div id="test1"></div>
<div id="test2"> </div>
<div id="test3">&nbsp;</div>
<div id="test4">Test</div>

<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for (i = 0; i < divs.length; i++) {
whiteSpaceRegExp = new RegExp('\s');
if (!divs[i].innerHTML.match(whiteSpaceRegExp)) {
alert(divs[i].id); // this is an empty div
}
}
</script>

[nitin.randive]

Ok Boss !
Thanks for everything !
I got sucess in my work !