css background image displays when user clicks link problem

Question

I updated my post. Now it says "link is not defined" "thisLink[link].scopeObject = new Image();" It's important that the link remains though because it is a property of linkObj that holds the current link. I use the [] as a property rather than dot notation due to the looping ability it provides.

<script type="text/javascript">
window.onload = init;
var linkObj = new Object();
var listItems = new Object();

function init() {
for(var i=0; i < document.links.length; i++) {
    var link = document.links[i];
    linkObj[link] = link;
    setupClick(linkObj);
}
}

function setupClick(thisLink) {
thisLink[link].scopeObject = new Image();
thisLink[link].scopeObject.src = thisLink[link].id + "Img.png";
thisLink[link].onclick = rollClick; 
}

function rollClick() {
var list = document.getElementById("target").childNodes;
for(var i=0; i < list.length; i++) {
    if(list[i].nodeName == "LI") {
        var id = list[i] + i;
        listItems[id] = id;
    }
}
for(id in listItems){
        if(listItems[id].indexOf(this[link].id) > -1) {
        listItem[id].style.backgroundImage =  this[link].scopeObject.src; 
}
}
}
</script>


<ul id="target">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>   
</div>
<div id="mainContent">
<div id="navLinks">
<ul>
    <li><a href="#" id="0">Home</a></li>
    <li><a href="#" id="1">About</a></li>
    <li><a href="#" id="2">Products</a></li>
    <li><a href="#" id="3">Contact</a></li>
</ul>   

Answer 1

I believe the trouble is in this line: var linkObj[link] = document.links[i];. You need to remove the var command at the front of that line. I presume your linkObj has been declared somewhere else in your code and you're attempting to insert a new value into it. If not, please post more complete code and I can look further into it.

-- EDITED BELOW --

Then my statement "I presume you defined linkObj elsewhere." is incorrect. You may need to go with this instead: var linkObj = document.links[i];. The var command creates variables. Once they're created, assignment does not require the var command. Are you attempting to keep an object that has reference to all of the links for later, or do you only need to use each link once? If the former, outside of your init() function add this line: var linkObj = {};.

-- MORE EDITS --

Holy Cow. I'm not 100% sure what your end aim here is, but I think you should use something like this at first:

<script type="text/javascript">
  window.onload = init;

  function init() {
    for (var i = 0; i < document.links.length; ++i) {
      setupClick(document.links[i]);
    }
  }

  function setupClick(thisLink) {
    thisLink.scopeObject = new Image();
    thisLink.scopeObject.src = thisLink[link].id + "Img.png";
    thisLink.onclick = rollClick; 
  }
</script>

That's going to get you to a point where you're at least assigning properties to the links as they exist in the document.links array. The desired behavior from your rollClick function is a little hazy to me, but at least using that to start out with you're assigning properties to the links in your page.