[SOLVED] innerHTML this not getElementByID

[laPistola]

I have a dynamicly created page which repeats a div with an ID, each div will contain a different row of XML spry data.

 

now if i set a getElemetById('rcPhoto').innerHTML its going to change every div with that id to what ever the last call is so i cant use it but is there another way to get this to either write my html where the <script> lays or a kinda this.innerHTML.

 

 

<div id="rcPhoto">
    	<script type="text/javascript">
		var picRS = "{readersRS::Picture}";
		var picRScom = "None";
		  if (picRS==picRScom) {
			  this.innerHTML = "no image available";
		  } else {
                                                     this.innerHTML = "<img src='{picRS}' />";
                                         }
	</script>
    </div>

 

i know this.innerHTML will not work just showing you where i mean!

[KevinM1]

An id is supposed to be a unique identifier.  That means one and only one per page.  So, it's invalid to have multiple elements with the same id.

 

Your best bet would be to generate divs with similar id's, like rcPhoto1, rcPhoto2, etc.  You should be able to count how many of these divs you need from the incoming XML data.

[laPistola]

Nope the XML will always be changing and ill only be showing some records that as a status of available.

 

I can't change the XML file as its controlled by a different company and used by many sites.

 

i did consider making each id dynamicly name as rcPhoto then the row number but as this is isn't possible due to the way the spry works im stuck again.

 

unless there is a way to say for eg  this.div.id = "rcPhoto"+rowNum

[KevinM1]

Yes, you can dynamically allocate ids like that.  Quick pseudocode:

var contentDiv = document.getElementById('content');

for(var i = 0; i < availableRecords.length; i++)
{
   (function() //anonymous function to make sure scope is left intact
   {
      var myDiv = document.createElement("div");
      myDiv.id = "rcPhoto" + (i + 1);
      //fill out more stuff with myDiv

      contentDiv.appendChild(myDiv);
   })(); //close and invoke function
} //end for-loop

 

Where availableRecords is an array of records retrieved from the XML file.

[laPistola]

Thanks i did this before you replied

 

<div id="readerContainer" spry:region="readersRS">
<div id="rcPhoto{readersRS::ds_CurrentRowID}">
    	<script type="text/javascript">
		var picRS = "{readersRS::Picture}";
		var rowNum = "{readersRS::ds_CurrentRowID}";
		var picRScom = "None";
		var divID = "rcPhoto" + rowNum;
		  if (picRS==picRScom) {
			  document.getElementById(divID).innerHTML = "No image";
		  } else {
			  document.getElementById(divID).innerHTML = "<img src='{picRS}' />";
		  }
	</script>
    </div>

 

{readersRS::ds_CurrentRowID} = 0 and the div id is rcPhoto0 for the first row but the above dont work

 

now if i change the var divID to "rcPhoto0" it works fine does just what i want it to do but no when divID = "rcPhoto" + rowNum; now i checked the value of divID when writen with the + rowNum and it shown as rcPhoto0 yet dont work ???

[laPistola]

i havn't made any chances really and now have this

<script type="text/javascript">
		var picRS = "{readersRS::Picture}";
		var rowNum = "{readersRS::ds_CurrentRowID}";
		var picRScom = "None";
		var divID = "rcPhoto" + rowNum;
		  if (picRS==picRScom) {
			  document.getElementById(divID).innerHTML = "No<br />Photo<br />Available";
		  } else {
			  document.getElementById(divID).innerHTML = "<img src='{picRS}' />";
		  }
	</script>

 

now when i test this the + rowNum now works fine but even tho i have checked the value of picRS which shows as None its doing the else???, the condition should read true ???

[laPistola]

never mind rewritten the hole thing in PHP