[SOLVED] create element class

[scottybwoy]

Hi all,

 

I'm trying to create some elements, but they don't seem to be comming out, I was wondering if it could be that fact that I'm assigning classes and class is a reserved word in javascript.  here's some code to show u:

var links = JSONData.topLinks;

for (var i=0; i<links.length; i++) {
var firstHref = document.createElement("a");
firstHref.href = links[i].link;
firstHref.class = links[i].class;
firstHref.title = links[i].title;
firstHref.innerHtml = links[i].text;
document.getElementById("java").appendChild(firstHref);

var div1 = document.createElement("div");
div1.id = links[i].text;
div1.class = "in";
document.getElementById("java").appendChild(div1);
}

 

So basically here, I have a link, followed by a div for each entry in my json file.  But I get nothing, also is there a way of seeing the java output as it doesn't appear in the source. (I select menu that does work)

[obsidian]

To reference an element's class attribute in JavaScript, it's not done with class but rather className:

for (var i = 0; i < links.length; i++)
{
  alert('My class is "' + links[i].className + '"!';
}

[scottybwoy]

Thanks for that obsidian, I should have worked that out myself before trying here.  Although I am now stuck a bit further on, one problem is to do with how my elements are being nested into each other and why my for loop crashes when there is no data in the object being handled.

 

From this link : http://www.mri.co.uk/company-info/terms-of-business2.htm you can see the left hand nav bar is what I am working on.

 

1) it does not show the link text, but does link (in FF).

2) spews out an error as the second loop has no values.

 

Here's the javascript:

var x = document.getElementById('java');
var y = x.appendChild(document.createElement('a'));

y.href = arr.link;
y.className = arr.style;
y.title = arr.title;
y.innerHTML = arr.linkText;

var z = x.appendChild(document.createElement('div'));
z.id = arr.linkText;
z.className = 'in';

var sub = arr.subs1;

for (var i=0; i<sub.length; i++) {
var a = z.appendChild(document.createElement('a'));
a.href = sub[i].link;
a.className = sub[i].style;
a.title = sub[i].title;
a.innerHtml = sub[i].linkText;
alert(a.innerHtml);

var sub2 = sub[i].subs2;

for (var ii=0; ii<sub2.length; ii++) {

	if (ii == 0) {
		var b = z.appendChild(document.createElement('div'));
		b.id = sub[i].linkText;
		b.className = 'in';
	}

	var c = b.appendChild(document.createElement('a'));
	c.href = sub2[ii].link;
	c.className = sub2[ii].style;
	c.title = sub2[ii].title;
	c.innerHtml = sub2[ii].linkText;
}
}

 

I tried putting an if clause above the second loop like if(sub2.length <1) But that didn't help.

 

An I'm not sure if I'm nesting my elements properly.  Any help greatly appreciated.

[scottybwoy]

I've cracked it!!

 

If anyone wants the code, here it is:

var x = document.getElementById('java');
var y = x.appendChild(document.createElement('a'));

y.href = arr.link;
y.className = arr.style;
y.title = arr.title;
y.innerHTML = arr.linkText;

if(arr.subs1) {
	var sub = arr.subs1;

	var z = x.appendChild(document.createElement('div'));
	z.id = arr.linkText;
	z.className = 'in';

	for (var i=0; i<sub.length; i++) {
		var a = z.appendChild(document.createElement('a'));
		a.href = sub[i].link;
		a.className = sub[i].style;
		a.title = sub[i].title;
		a.appendChild(document.createTextNode(sub[i].linkText));

		if(sub[i].subs2) {
			var sub2 = sub[i].subs2;

			var b = z.appendChild(document.createElement('div'));
			b.id = sub[i].linkText;
			b.className = 'in';

			for (var ii=0; ii<sub2.length; ii++) {
				var c = b.appendChild(document.createElement('a'));
				c.href = sub2[ii].link;
				c.className = sub2[ii].style;
				c.title = sub2[ii].title;
				c.appendChild(document.createTextNode(sub2[ii].linkText));
			}
		}
	}
}

Just feed it two tier arrays and using the sub.element names as keys. I put mine in a json file.