Javascript getElementById - reading works, altering doesn't.

Question

So, I have this pretty complex ajax thing going. It loads new html (including div tags and all) to show up on the page. I included a 'more' link to load additional data.

This more link links to my javascript function. The 'more' link is located in a div, which I gave a unique id. The next time the load function is called, I use document.getElementById(the id).style.display="none"; to "remove" this div from the look of the page.

I set error traps for this, the div with that id is found without problems, but javascript fails to change my style property.

I tested alert(document.getElementById(the id).innerHTML); and that worked without problems - hence the title of the question.

So, does anyone have any ideas/do I need to offer more information? The main problem is that it doesn't throw any errors anywhere, yet it fails to complete the task I asked...

Here's a bit of code to go with it -

try 
{
    var myidthing = "morelink" + ContentStart.toString(); //the id is correct
    var div = document.getElementById(myidthing);
    if (!div)
    {
    }
    else
    {
     div.style.display="none"; //this doesn't work, but doesn't raise an error
     alert(div.innerHTML); //this works without problem
    }
}
catch(theerr)
{
    alert(theerr);
}

------------------------->EDIT<------------------------- I'm incredibly sorry if I upset any people. I'm also angry at myself, for it was a stupid thing in my code. Basically, I had a variable that stored the contents of a parent div. Then I (succesfully) removed the div using the removeChild() method. Then my code pasted the contents of that vaiable (including the div I wanted gone) back into the parent div. I switched around the order and it works fine now.

Again, excuse me for this.

Answer 1

Throwing out a few ideas of things to look for:

• You said the div is generated by javascript. Is it possible the div you are targeting is not the one you think you are? It could be you are targeting another div, which is already hidden, or obstructed... or maybe the innerHTML you are displaying goes with a different element than the one you intend to target. Put an alert or script breakpoint in the if(!div) case, also, and see if it's going down that path.
• If the above code is only a stripped-down version of your actual code, check your actual code for typos (for example: style.display = "none;";)
• Using the FireBug plugin for FireFox, inspect the target element after the operation completes, and make sure that the display: none appears in the style information. If not, use FireBug's debugger to walk through your javascript, and see if you can figure out why.
• Use FireBug to break on all script errors, in case there is another error causing this behavior.

Answer 2

Try empty quotes instead of 'none' and see if that works?:

document.getElementById('element_id').style.display="";

Failing that, don't change the style, just add a class which hides the element.