How to dynamically change contents of div using javascript

[krishnandu]

Hey friends, I got stuck again here. Tried googling out and cudn't find a right solution.

Here is my problem defination :
There is a div with id="menu" and I've created some menu's using ol and ul

Now I've created a another div with id=content and I've kept it blank.

Now I've linked the menus using <a href="#" onClick="load();">

And in the head part I've used a script tag and created a function
function load()
{
document.getElementsByID("content").innerHTML="";
}

Now the problem is whenever I write Hello / Hi in the double quotation there or sumthing like this it works.

But when it crosses one line it doesn't works. And gives error.

Well if I've mistaked in syntax spelling please ignore that coz I'm using Dreamweaver for my original work.

What to do now?? Or do I've to do it in any other way??

Lastly sorry for my bad english.

 

[whatsinaname]

You can try something like this.

Initially, on page load, it'll look like this.

<div id="menu">

Your menu items.

</div>

<div id="content">

Your content items. ("Hello/Hi etc")

</div>

you should add {display:none;} to your content css so that it is hidden on page load.

On your button click, your javascript should do

function load()

{

var c = document.getElementsByID("content");

if (c == 'none')

c.style.display = 'block' ;

else

c.style.display = "none';

}

This will toggle display of youd div 'content'. (Hopefully. I am a n00b at this as well. )

 

[gauviz]

Didn't get this part

But when it crosses one line it doesn't works. And gives error.

Do you mean that the text that you put in innerHTML = "";

Well if you need a newline you should use
This will be shown as newline in html.

 

[krishnandu]

No no you didn't understand the problem.

Say I've 3 menu's

Menu 1

Menu 2

Menu 3

When I click Menu 1 something will be shown in div content. Say on clicking Menu 1 "You have clicked Menu 1" will be shown in div id="content".

On clicking Menu 2 "You have clicked Menu 2" will be shown on div id="content".

Like this.

For that I'm using innerHTML. But when I write something in one line it works. But pasting the whole content (approx 50lines) it doesn't work. And how do i do the formatting options??

Like I want to appear "

This is a paragraph with bold content </p>" on clicking Menu 1.

I hope the question is clear now.

Didn't get this part

Do you mean that the text that you put in innerHTML = "";

Well if you need a newline you should use
This will be shown as newline in html.

Ya you understood the problem to some extent. No I'm not talking about the
I'm saying that the HTML code that I put in innerHTML.

Say I'm writing this to innerHTML

....innerHTML = "

This is a paragraph</p> This is a bold text This is a italic text <table><tr><td>Row 1 Coloumn 1</td><td> Row 1 Coloumn 2</td></tr><tr><td>Row 2 Coloumn 1</td></td>Row 2 Coloumn 2</td><tr></table>"

Now you can see the whole text in innerHTML took more than one line. This is not working. But if I write innerHTML = "Hello", it works.

Ok I'm uploading the HTML file for proper understanding.
http://www.easy-share.com/1910046012/connectingpeople.html

Please take your time to view the file.

See the innerHTML portion in script tag. I've written a big portion of HTML code. It's not working. But if I write simply "Hello" it works. What's the problem??

 

[Konquerror]

HTML file not found...please upload it again..

 

[gauviz]

I dont think there is any limit to the length of a line. If you don't press enter at the end of the line your editor might wrap it to the next line. Just check this once that you have not pressed enter at the end of the first line.

 

[sevensins]

function load()
{
document.getElementsByID("content").innerHTML="";
}

Is the s a typo??

 

[krishnandu]

I've uploaded the file again...

connectingpeople.html

@sevensins Yup, I use dreamweaver so there is no spelling mistake in syntax.

@gauviz I knew that too. But cudn't find out what am I doing wrong now.

Everyone please take your time to check the file and say me the solution please

 

[gauviz]

Well i saw one problem

<ul type="square">

You cannot use double quotes here as it's already inside a double quote. You need to either use single quote or escape this quote else the quote that you open at

document.getElementById("content").innerHTML="

will get closed here

<ul type="

 

[krishnandu]

Thank you. I've inserted the escape charachter in <ul type=\"square\">

But the problem doesn't solve.

I've also tried this <ul type='square'>

And also this

innerHTML='.......<ul type="square">.......';

Nothing solved the problem.

 

[gauviz]

Problem is pressing enter after end of line i removed all newlines and it's working fine.

Can send you the working file if u want

Here is the link
connectingpeople.html

 

[krishnandu]

Hey thanks a lot.

Problem solved.