What could break an innerHTML assignment?

[too much information]

I'm trying to assign content to a div and somehow it just isn't working.

document.getElementById('myID').innerHTML='New DIV Content';
(yes I'm trying this exact basic set of text)

I'm calling this as a part of a php generated javascript file and all of my other javascript calls from this script work as expected except this one even when I simplify it as shown above.

I can't see any reason for this call to fail so I'm just wondering if any of you may have run into any situations where this type of simple call has failed.

Could there be something causing a conflict, or is that just not a possibility?

[lichul]

are you sure that javascript code called after target DIV has been load by browser?

[Fotiman]

As lichul said, make sure that this bit of code is running after myId has been loaded in the DOM. Another thing that could cause problems would be if you had multiple elements with the id 'myID'.

[Fotiman]

You can try debugging this with Firebug. Modify the code slightly to:

var myID = document.getElementById('myID');
// inspect myID with Firebug to make sure it's an HTMLElement
myID.innerHTML='New DIV Content'; 

And then add a breakpoint before you assign the innerHTML value and inspect myID.

[too much information]

OK, I'm trying something different. I think the problem is that my script is crapping out when I'm dealing with my radio buttons and it only appears that the script is working up to that point.

Or it's an issue with how I'm calling the script.

So I'm getting rid of my <form> tags because I don't really want to execute a form anyway. Then I'm giving all of my elements id tags which makes them easier to identify anyway.

Then I need to update my function and I'll get back to you on how it goes. I'm not exactly sure that what I was seeing is what I thought was happening at this point. (Thanks to a few well placed alert boxes!)

[Fotiman]

So I'm getting rid of my <form> tags ...

Be aware that if you have any form elements (inputs, etc.), then you might invalidate your markup by removing the form element. You may or may not care about that.

Good luck.

[MichaelBluejay]

What exactly is the error? Try it in Firefox and check the Error Console window. If that doesn't provide enough clues, start rebuilding the page from scratch, with like only five lines of code, make sure it works, and then keep adding a little code back, check, add more code back, check, until it fails.

[rocknbil]

Right, make sure there's no error.

Make sure the document validates [validator.w3.org]. One other thing that will make this fail is if you errantly have two elements with the same ID, or are using an ID that conflicts with reserved words (like id="search", id="submit", etc, which doesn't appear to be the case.)

Then do this, which you should do anyway:

if (document.getElementById('myID')) {

document.getElementById('myID').innerHTML='New DIV Content';

}
else { alert('ID\'ed element not found'); }

You can eliminate the else once you figure it out.

[Fotiman]

if (document.getElementById('myID')) {

document.getElementById('myID').innerHTML='New DIV Content';

}

I would put the result in a variable if you do this. That way you don't search the DOM twice. As in:

var myID = document.getElementById('myID');
if (myID) { 
  myID.innerHTML = 'New DIV Content';
}

Essentially the same thing, just slightly more efficient. :)

[too much information]

Ok, I found multiple problems and the innerHTML call was never the problem, go figure...

First, with the <form> tags my page was reloading which basically made the javascript not run.

Then I had one variable that needed a encodeURIComponent so that it didn't kill my call to the PHP function that was processing my form data that I was pulling with the javascript.

Then there was the stupid string issue. Clearly I'm new to Javascript and for some reason just expected it to behave similarly to PHP with variables included in strings of text. DUH

But now that it's all cleaned up It's pretty nice. What I have now is a simple form, without the form tags (no sense putting them back in now that it's working), where a user can enter menu items (for example). So an item name, then a price and a description.

From there the button executes a javascript to grab the entries, format them and add them to a beautified display of the items. The trick was that I had multiple item types, so say you wanted to add a side item, that should go in a section with other sides, and specials should be organized together as well.

Thanks for the help guys, I guess it was more of an error tracking issue, but all of your suggestions are helping me pick up javascript faster than I expected to!

[Fotiman]

Glad you got it working. Does it still work for users with JavaScript disabled though?

[rocknbil]

var myID = document.getElementById('myID');

Yeah, but if myID doesn't exist . . . don't you get " 'myID' is null or not an object"? That's kinda the point of the if . . .

[Fotiman]

Not sure what you're getting at rocknbil. The "if" was still included in my example. All I was doing was putting the results of document.getElementById into a variable so you don't have to call it twice. If it was not found, then myID will be null and the if(myID) will not step into the block.