Not sure if i'm doing this correctly...

[DiarYofaMadmaN]

<script type="text/javascript">
var homelink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');
var companylink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');
var serviceslink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');
var hardwarelink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');
var gamesystemslink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');
var homeandofficelink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');
var accessorieslink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');
var networkinglink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');
var accessoreslink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');
var packagedealslink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');

function leftnav(varname) {
/*document.getElementById('cell-title').innerHTML+="<img src=\""+toptitle+"\">";*/
if (document.getElementById('links-left-float').innerHTML != null) {
document.getElementById('links-left-float').innerHTML = '';
document.getElementById('links-left-float').innerHTML+=varname;
}
else {
document.getElementById('links-left-float').innerHTML+=varname;
}
}
</script>


What I'm trying to do is take the values of those vars and add it a div(links-left-float) with innerHTML. I'm getting this error though: Error: document.getElementById("linksleftfloat") has no properties
Source File: http://maxforcepc.ath.cx:81/maxforcepc/css/index.htm
Line: 20

I think that error has to do with it's trying to load something that hasn't been loaded yet.

How would I go about fixing this problem?

-Thanks

[Paul Jr]

Everything looks in order, so I'm not sure why that error is coming up, but your script won't work anyways.
Even when empty (<div id="links-left-float"></div>) the value of the <div>'s innerHTML property is not null, it's just empty. So instead of != null, I would use != "".

Also... now that I think about it, checking the value and resetting it is not needed anyways; innerHTML will completely overwrite any current data with the new data.

[DiarYofaMadmaN]

I forgot to add this one peice of coding:


<area shape="rect" coords="513,125,590,135" href="#" onClick="leftnav('accessorieslink');">


That calls the above function... Well, I was talking to people in #javascript on dalnet and they said that i'm calling the function that isn't even loaded yet.... Something like that.

I have no clue, it's still not working. All I get is: accessorieslink being printed out in the div. Not the value of accessorieslink. I'm also still getting that Error. I loaded the page onto mozilla and checked the errors and it said:

Error: document.getElementById("links-left-float") has no properties
Source File: http://maxforcepc.ath.cx:81/maxforcepc/css/index.htm
Line: 21

[Paul Jr]

Try

function leftnav(varname) {
var links = {
homelink: "<UL><LI>1st element of list 1</LI><LI>2nd element of list 1</LI></UL>",
companylink: "<UL><LI>1st element of list 2</LI><LI>2nd element of list 2</LI></UL>",
serviceslink: "<UL><LI>1st element of list 3</LI><LI>2nd element of list 3</LI></UL>",
hardwarelink: "<UL><LI>1st element of list 4</LI><LI>2nd element of list 4</LI></UL>",
gamesystemslink: "<UL><LI>1st element of list 5</LI><LI>2nd element of list 5</LI></UL>",
homeandofficelink: "<UL><LI>1st element of list 6</LI><LI>2nd element of list 6</LI></UL>",
accessorieslink: "<UL><LI>1st element of list 7</LI><LI>2nd element of list 7</LI></UL>",
networkinglink: "<UL><LI>1st element of list 8</LI><LI>2nd element of list 8</LI></UL>",
accessoreslink: "<UL><LI>1st element of list 9</LI><LI>2nd element of list 9</LI></UL>",
packagedealslink: "<UL><LI>1st element of list 10</LI><LI>2nd element of list 10</LI></UL>"
}
document.getElementById('foo').innerHTML = links[varname];
}

Tested, should work.

[DiarYofaMadmaN]

Originally posted by Paul Jr
Try

function leftnav(varname) {
var links = {
homelink: "<UL><LI>1st element of list 1</LI><LI>2nd element of list 1</LI></UL>",
companylink: "<UL><LI>1st element of list 2</LI><LI>2nd element of list 2</LI></UL>",
serviceslink: "<UL><LI>1st element of list 3</LI><LI>2nd element of list 3</LI></UL>",
hardwarelink: "<UL><LI>1st element of list 4</LI><LI>2nd element of list 4</LI></UL>",
gamesystemslink: "<UL><LI>1st element of list 5</LI><LI>2nd element of list 5</LI></UL>",
homeandofficelink: "<UL><LI>1st element of list 6</LI><LI>2nd element of list 6</LI></UL>",
accessorieslink: "<UL><LI>1st element of list 7</LI><LI>2nd element of list 7</LI></UL>",
networkinglink: "<UL><LI>1st element of list 8</LI><LI>2nd element of list 8</LI></UL>",
accessoreslink: "<UL><LI>1st element of list 9</LI><LI>2nd element of list 9</LI></UL>",
packagedealslink: "<UL><LI>1st element of list 10</LI><LI>2nd element of list 10</LI></UL>"
}
document.getElementById('foo').innerHTML = links[varname];
}

Tested, should work.

Thanks!!! The coding i created worked until i decided to put the unorded list into variables and try and get the var... If i just did it without variables it would work. I don't understand why. Can you explain to me if you have the time why that didn't work and why your code works? I don't want to just copy and paste code and not totally understand why it works.

-peace

[Paul Jr]

My code stored the lists as properties of the "links" object, and when the function was invoked, the desired property name was passed to the function and the value was written into the <div> with the innerHTML property.

Your code was actually working fine, just not as expected. This line: var homelink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');, and the rest of them, was actually calling the "leftnav" function when the page loaded, passing all that data as an argument. The function was supposed to add data to a <div> via the innerHTML property, with the data to be added being the argument passed to the function. So in other words, the last variable's value was trying to be added to the <div> when the page was being parsed, but it couldn't because that <div> didn't exist yet. The variables and the function/invocation of the function were basically separate things. You defined the function, and, without knowing it, invoked it when the page loaded with the variable values between leftnav(' and '); being the expected argument. There was also no way to get the value of the variables. You defined them, but how to access them? How does "varname" reference any variable value? You would have to put the values into an array; an associative array would work.

That probably won't make sense, so your code was doing something like this:

<script type="text/javascript">
var a = add('foo');
var b = add('bar');
function add(varname) {
document.getElementById("foo").innerHTML = varname;
}
</script>
... ... ...
<a href="#" onclick="add('a'); return false;">Add "Foo"</a>
<div id="foo"></div>

So, since the add function is writting the argument to the <div>, that code will attempt to add "foo", and "bar" to the <div>, but it can't since when the browser reaches that peice of code, the <div> hasn't been created yet. But if you surround the variables with onload = function() { and }, then when the page loaded the <div>'s value would be "Bar."


I hope that makes sense... I can see in my head why it doesn't work, I'm just not very good at putting it into words. :o :D

[DiarYofaMadmaN]

Originally posted by Paul Jr
My code stored the lists as properties of the "links" object, and when the function was invoked, the desired property name was passed to the function and the value was written into the <div> with the innerHTML property.

Your code was actually working fine, just not as expected. This line: var homelink = leftnav('<UL><LI>1st element of list</LI><LI>2nd element of list</LI></UL>');, and the rest of them, was actually calling the "leftnav" function when the page loaded, passing all that data as an argument. The function was supposed to add data to a <div> via the innerHTML property, with the data to be added being the argument passed to the function. So in other words, the last variable's value was trying to be added to the <div> when the page was being parsed, but it couldn't because that <div> didn't exist yet. The variables and the function/invocation of the function were basically separate things. You defined the function, and, without knowing it, invoked it when the page loaded with the variable values between leftnav(' and '); being the expected argument. There was also no way to get the value of the variables. You defined them, but how to access them? How does "varname" reference any variable value? You would have to put the values into an array; an associative array would work.

That probably won't make sense, so your code was doing something like this:

<script type="text/javascript">
var a = add('foo');
var b = add('bar');
function add(varname) {
document.getElementById("foo").innerHTML = varname;
}
</script>
... ... ...
<a href="#" onclick="add('a'); return false;">Add "Foo"</a>
<div id="foo"></div>

So, since the add function is writting the argument to the <div>, that code will attempt to add "foo", and "bar" to the <div>, but it can't since when the browser reaches that peice of code, the <div> hasn't been created yet. But if you surround the variables with onload = function() { and }, then when the page loaded the <div>'s value would be "Bar."


I hope that makes sense... I can see in my head why it doesn't work, I'm just not very good at putting it into words. :o :D

Thanks :D

[Paul Jr]

You're welcome. I hope you understood, at least partly, my horrible explanation. ;) :o