How to dynamically change contents of div using javascript

krishnandu

Well-Known Member
Veteran
Dec 25, 2009
1,838
218
102
30
Kolkata
www.krishnandusarkar.com
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

Well-Known Member
Veteran
Apr 18, 2007
1,381
782
202
36
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. :p)
 

gauviz

Well-Known Member
Adept
Mar 19, 2009
330
12
82
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

Well-Known Member
Veteran
Dec 25, 2009
1,838
218
102
30
Kolkata
www.krishnandusarkar.com
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.

gauviz said:
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??
 

gauviz

Well-Known Member
Adept
Mar 19, 2009
330
12
82
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.
 

gauviz

Well-Known Member
Adept
Mar 19, 2009
330
12
82
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

Well-Known Member
Veteran
Dec 25, 2009
1,838
218
102
30
Kolkata
www.krishnandusarkar.com
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.