JavaScript - Can't Save The Id Of Dynamically Created Anchor Onclick

Hello,

I'm trying to write a script for a website that reads from a database and makes a separate table for each entry in the database. Since the number of entries can change, I want to dynamically create a div for each one, which I can later hide or display based on user selection. However, when I try to access the dynamically created elements by their ID, they return null.

Is what I'm trying to do here actually possible?

Code:

	for(var i = 0; i < tables.length; i ++)
	{
		var newDiv = document.createElement("div");
		newDiv.setAttribute("id", tables[i].name);
		newDiv.setAttribute("name", tables[i].name);
		newDiv.setAttribute("class", "hidden");
		newDiv.innerHTML += tables[i].name;
		newDiv.innerHTML += "<table id = 'table"+tables[i].name+"' border = '1'>";
		newDiv.innerHTML += "<tr>";
		
		for(var rows = 0; rows < table.arrayOfFields.length; rows++)
		{
			newDiv.innerHTML+="<th>"+table.arrayOfFields[rows].title+"</th>";
			numOfEntries = table.arrayOfFields[rows].arrayOfEntries.length;
		}
		
		newDiv.innerHTML+="<tr>";

		for(var cols = 0; cols < numOfEntries; cols++)
		{
			
			for(var rows = 0; rows < table.arrayOfFields.length; rows++)
			{
				newDiv.innerHTML+="<td>"+table.arrayOfFields[rows].arrayOfEntries[cols].data+"</td>";
			}
			
			newDiv.innerHTML+="<tr>";
		
		}
		
		newDiv.innerHTML+="</table>";
		document.body.appendChild(newDiv);

	}

Hi all ,

i am creating a dynamic controls but one thing iam stack on is how to associate an existing class ("C1") to that dynamic control : i.e

var var1 = row.insertCell(0);
var1.align ="center";
var1.innerHTML - array1[A1[i]];


thoughts ?

thanks

im trying to create a script for greasemonkey (tried getting help from their discussion forums, but no one ever answers), but its still written in javascript.

so here is what im trying to do. Ive got a dynamically created division that aligns to the right of the browser window. Now im trying to put links inside it as you normally would with like a document.write statement or other methods.
The only problem is, any method i try wont work for me.

heres my code, maybe someone could give me some things i could try.
Code:

function QuickLinks() 
{ 
	var body = document.body;
	var div2 = document.createElement("div");
	div2.setAttribute('class','QL');
	div2.setAttribute('style','background-color: #692510;width: 200px;height: 500px;top: 2cm;position: absolute;right: 5px;z-index: 4;');
	var links = document.createTextNode("where i want my links"); //now with that statement it just writes text, ive tried document.write and many other methods and nothing seems to work.
	div2.appendChild(links);  //this just inserts the links into the div.
	body.appendChild(document.createElement('br'));
	body.appendChild(div2);
}

QuickLinks();

Hi. I've dynamically created some divs, how do I select a specific div to use?

Code:

//create box for length of letters in word
		var i = 0;
		for(i=0;i<wL;i++){		
			cBoxes = document.createElement("div");
				cBoxes.className = "letterBoxes";
						hangMan.appendChild(cBoxes);
				}

So I'm creating the amount of divs equal to the amount of letters in my word (I'm making a hangman game).

On correct guess, I need the letter to show in it's correct position (within the correct blank div previously created).

I have the correct position stored in a variable (letPos), and the correct guess (userGuess), I need to show userGuess at the div equal to letPos, ie div 4 or div 5, etc.

If I simply go cBoxes.innerHTML = userGuess, the correct userGuess always shows at the last position in my cBoxes divs. I need it to show at the correct position (letPos).

Any hints?

Hi,

This is my first time here so I hope I'm not posting to the wrong forum. If this has been answered before, please direct me to the corrent post.

I've created several dynamic checkboxes with with following code:

<code>
var pnl = document.getElementById("pnlSalesPeople");

for (i = 0; i < sales.length; i++)
{
var ck = document.createElement("input");

ck.type = "checkbox";
ck.id = "ck" + i;
//ck.checked = true;

var label = document.createElement('label');
label.htmlFor = ck.id;
label.id = "label" + i;
label.appendChild(document.createTextNode(sales[i]));

pnl.appendChild(ck);
pnl.appendChild(label);
pnl.appendChild(document.createElement('<br />'));
}
</code>

All the checkboxes get put into the panel, one per line, as expected. However, clicking on any of them does not change their checked state--if I uncomment the line setting the state above, all the checkboxes are checked, but they don't become unchecked when clicking on them.

I'm thinking I'm missing something that will make these checkboxes behave like they should or my approach to dynamic creation is flawed. In any event, my knowledge of Javascript is certainly not at expert level so I'm hoping there might a simple solution to my dilemma. Any help on this is genuinely appreciated. TIA

Hi all,

I have a set or icons that which over time I replace with a different icon and and add a onclick event to them. This is my code

Code:

function updateStatusIcons(retText) {
	updatingStatuses = true;
	var updates = retText.split("|");

	for (z=0; z<updates.length; z++) {
		var sysId = trim(updates[z].split(":")[0]);
		var projectId = trim(updates[z].split(":")[1]);

		if (projectId != "") {
			var statusImg = getSysidsImg(sysId);
			statusImg.src = "images/tick.gif";
			statusImg.className = "hand";
			statusImg.title = "Project "+ projectId +" created, Click here to find in project search";
			statusImg.onclick = function () { document.location = "projectSearch-FTTC.jsp?initAction=loadproject&projectId="+ projectId; };

			// Remove sysid from csv
			removeSysidfFromCSL(sysId);
		}
	}


	if (pollingOn) {
		pollingupdate = setTimeout("checkForProjectComplete()", 5000);
	}
	updatingStatuses = false;

	if (runErrorFunction) {
		markErrors();
	}
}

Everything works fine except for the onclick event. In the hover message of the icon, the correct project ID is displayed in the message, hoever in the function, the onclick funtion always loads the page with the last set project id. How can I pass the project id into the onclick function and make it stay fixed and not be the value of that it was last set to?

TIA,
Dale

Below I have dynamical generated radio buttons, the names($approve variable is the name) per radio button pairs are different(dynamically created names using looping). When I create two buttons, one is for if you click it, all the radio button with the label approve will be selected all, and the other button is for the disapprove label button that will select the radio button with the label disapprove. How can I make this right. Below are the codes I created. Thanks


Code:

<script>
function selectAll() 
{
   var i = 0;

 objElems = document.t4.elements;
 for(i=0;i<objElems.length;i++){
 objElems[i].checked =true;
   }
</script>

PHP Code:
<form action="viewall.php" method="post" name="t4">
while(condition)
{
echo "<td ><input type='radio' name='". $approve."' id='app' value='approve' /> Approve<br />   </td> 
        <td ><input type='radio' name='". $approve."' id='disp' value='disapprove' /> Disapprove<br />   </td> ";
}


<tr><td><input type="button" name="all_app" value="Select All Approve" onclick="selectAll(this.value);" ></td>
<td><input type="button" name="all_app2" value="Select All disapprove" onclick="selectAll(this.value);" ></td>
</tr>
</form> 

Hi,
I am using a javascript datepicker which works fine with simple textboxes:
For example:
I have a textBox startDate1 in the table below:
<form method="post" name="upload" action="">
<table id="tableId">
<tr>
<td>
<input type="text" name="startDate1" value="" readonly="true" size="10"/>
<script language="JavaScript">
new tcal ({'formname': 'upload','controlname': 'startDate1'});
</script>
<td>
</tr>
<table>
</form>

--Now I want to add rows dynamically to this table for which I have
<a href="javascript:addRowToTable();" >Add Row</a>

and the corresponding javascript function:
<script type = "text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tableId');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

var box = row.insertCell(0);
var element = document.createElement('input');
element.setAttribute('type', 'text');
element.setAttribute('name', 'startDate' + iteration);
box.appendChild(element);
}
</script>
--This code creates the text boxes properly, but I am not being able to add the datepicker to it.
Please suggest me a way to add the datepicker to the textboxes in the dynamically generated rows.

Thank You
Regards
Rusho Shaw

To order a customized product from my site, the user has to upload an image and then submit text (separate steps but part of the same php form) before adding to their cart. Currently, the user must scroll back down from the top of the page to the next part of the form after each step which is more confusing than I would like.

The first step of the form uses a straight forward <form> and I was able to add an action="#anchor" to jump down to where I set the first anchor.

The second step is regrettably not so straight forward and I'm having trouble adding an anchor. After entering text, the user clicks a submit button which triggers an alert letting them know the text was submitted successfully. When the user clicks the okay button on the popup alert, I would like the page to jump down to the 'add to cart' portion.

This is the button: Code:

echo '<tr>
    <td valign="bottom" colspan="2" align="center">
        <input id="delete_button" class="button" type="submit" value="Attach Text" onclick="return( confirm( this.form ) );" />
	</td>
</tr>';

And this is the alert: PHP Code:
echo vmCommonHTML::scriptTag('', "function confirm( form ) {
        form.task.value='confirm_text'; 
        alert('Your text was successfully attached.');
        return true;
        
}" ); 


How can I prevent the page from returning to the top after the user submits text?

Thank you,
Charlotte

I am dynamically appending an img to the inner HTML of an element, to add in help in the form of a clickable icon next to select elements. When the img is added to an anchor the image of course becomes part of the link, and clicking the image invokes the anchor's action. The img has an onclick handler which triggers the dynamic help pop-up. My problem is that I can't seem to block the default anchor action, and thus the anchor is invoked also. The img onclick handler is called before the anchor event is processed (an alert popup will block the anchor's execution until the alert is dismissed), but returning false from it does not block the anchor's action.

Any suggestions? I can move the img element to be a peer of the anchor element instead of a child, but I would like a programmatic fix instead of changing the way it interacts with the DOM if possible.

Thanks.

OK, I'm filling in for a coworker on a radio stations website.

The station currently streams live online. I want to add an event tracking so I can track how many people are streaming. I'm really new to js, but I think I figured it out (keyword is "think"). However, there was already an onclick event within the anchor tag. Can I have two in the same tag? Is there a better way to do this?

Code:

<a href="/fmstream/listen.asx" onclick="window.open(this.href,'Listen','resizable=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no,width=400,height=400,status'); return false" onClick="pageTracker._trackEvent('Stream','Listen_Button','Stream_Live');">
<img src="/images/filecabinet/folder1/listen1.png" alt="listen1"></a>

I am trying to autofill a box by clicking a link (with return false). The function to autofill works with button tag but not in anchor tag - instead of returning false, the click event transitions to the href.

Here is the simplified code. Any help is appreciated.Thanks

<!DOCTYPE html PUBLIC"-// W3C//DTD Xhtml 1.0 Strict//EN"" http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Page
</title>
</head>

<script type="text/javascript">
function autofill(frm){
frm.box2.value = 'sample_value';

}
</script>
<body>
<FORM NAME="browse" ACTION="<TMPL_VAR MYURL>/browse_results">
<font size="5">
<b>FIND
</b>
</font>
<hr>
<div class="menu" id="find_block">
<ul>
<li>
<a href="#">DOMAINS
</a>
<ul>
<li>

<a href="#1" onclick="alert('Heading Home!'); return false;">1. alert with link
</a>
</li>
<li>
<a href="#2" onClick="autofill2(this.form); return false;">2. autofill with link

</a>
</li>
</ul>
</li>
</ul>
<input readOnly name="box2"/>
<INPUT TYPE=BUTTON OnClick="autofill(this.form,'2')" VALUE="autofill with button ">
</div>
<br>
<font size="5">
<b>WHERE
</b>
</font>
<hr>
</FORM>
</body>
</html>

Hello, So I have two pieces of Javascript attached to my open/close text boxes.

One for the visibility function:
Code:

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

The other for changinging the image to reflect the text box's status (open of closed):
Code:

<script type="text/javascript">
var ImgPath='../images/portfolio/';
function changeImage (id) {
var tab = document.getElementById(id);
if (tab.src.match('open.png')) {
tab.src = ImgPath + 'close.png';
}
else {
tab.src = ImgPath + 'open.png';
}
}
</script>

The problem only shows further down the page, when I click to open a box it automatically goes back to the top of the page instead of staying at the user's current page position

I would like it to stop changing the page position onclick. Any help would be much appreciated!

I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked.

I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight...

The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway.

I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below.

Thanks.

Code:

/* designImages[x][0] = the image source on the page;
 * designImages[x][1] = the destination url on clicking the image;
*/

		var designImages = new Array();
		designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
		designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
		designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
		designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
		designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
		designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );

		designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
		designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
		designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
		designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
		designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
		designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );

		designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
		designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
		designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
		designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
		designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
		designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );

		designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
		designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
		designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
		designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
		designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
		designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );

		designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
		designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
		designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
		designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
		designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
		designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );

		designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
		designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
		designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
		designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
		designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
		designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );

		designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
		
window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (x in designImages)
			{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
			};
	}

function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}