Clearing it out

[Cy]

I have a script that uses the DOM to draw to the page depending on a
selection by the user. Problem is that if they hit the selection
again it draws the info again creating more than one instance of what
should actually be on screen.

In addition, if the user selects one thing, then realizes they want
another the old info is not erased. Instead the new info is appended
to what was there before.

How do I keep from having the same info drawn over and over, and how
can I replace the info if the user makes a wrong selection?

Below is the code I am using. A div called "new_page_toggl e" is given
the result.

// New page or not function
function new_page(decisi on) {
document.getEle mentById('new_p age_toggle').vl ue = "";
if (decision == 'yes') {
br_tag1 = document.create Element('br');
br_tag2 = document.create Element('br');
br_tag3 = document.create Element('br');

title_text = document.create TextNode("Enter the title text to
be displayed in the browser");
bold_tag1 = document.create Element("B");
bold_tag1.appen dChild(title_te xt);
title_input = document.create Element('input' );
title_input.set Attribute("type ", 'text');
title_input.set Attribute("name ", 'browser_title' );
title_input.set Attribute("id", 'browser_title' );
title_input.set Attribute("size ", '127');

disc_text = document.create TextNode("Enter the text to be
displayed when found by internal search engine");
bold_tag2 = document.create Element("B");
bold_tag2.appen dChild(disc_tex t);
disc_input = document.create Element('input' );
disc_input.setA ttribute("type" , 'text');
disc_input.setA ttribute("name" , 'search_desc');
disc_input.setA ttribute("id", 'search_desc');
disc_input.setA ttribute("size" , '127');


document.getEle mentById('new_p age_toggle').ap pendChild(bold_ tag1);

document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g1);

document.getEle mentById('new_p age_toggle').ap pendChild(title _input);

document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g2);


document.getEle mentById('new_p age_toggle').ap pendChild(bold_ tag2);

document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g3);

document.getEle mentById('new_p age_toggle').ap pendChild(disc_ input);

} else if (decision == 'no') {
br_tag1 = document.create Element('br');

url_text = document.create TextNode("Enter URL(s) of the
page(s) to edit");

document.getEle mentById('new_p age_toggle').ap pendChild(url_t ext);

document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g1);
for (i=1; i<=5; i++) {
url_input = document.create Element('input' );
url_input.setAt tribute("type", 'text');
url_input.setAt tribute("name", 'url_'+i);
url_input.setAt tribute("id", 'url_'+i);
url_input.setAt tribute("size", '127');

bold_tag = document.create Element("B");
num = document.create TextNode(i+")-");
bold_tag.append Child(num);

br_tag2 = document.create Element('br');

document.getEle mentById('new_p age_toggle').ap pendChild(bold_ tag);

document.getEle mentById('new_p age_toggle').ap pendChild(url_i nput);

document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g2);
}
}
}

[Ivo]

Re: Clearing it out

"Cy" wrote[color=blue]
> I have a script that uses the DOM to draw to the page depending on a
> selection by the user. Problem is that if they hit the selection
> again it draws the info again creating more than one instance of what
> should actually be on screen.
> (...) Below is the code I am using. A div called "new_page_toggl e" is
> given the result.[/color]

Remove the div from the DOM and re-create it:
var oldpagetoggle = document.getEle mentById('new_p age_toggle');
if(oldpagetoggl e) document.body.r emoveNode(oldpa getoggle);
var newpagetoggle=d ocument.createE lement('div');
newpagetoggle.i d='new_page_tog gle';
document.body.a ppendChild(newp agetoggle);

HTH
Ivo

[McKirahan]

Re: Clearing it out

"Cy" <cy.jobes@sas.c om> wrote in message
news:be7sb01krj g1tlh37ml3qbj24 3mluim6u4@4ax.c om...[color=blue]
> I have a script that uses the DOM to draw to the page depending on a
> selection by the user. Problem is that if they hit the selection
> again it draws the info again creating more than one instance of what
> should actually be on screen.
>
> In addition, if the user selects one thing, then realizes they want
> another the old info is not erased. Instead the new info is appended
> to what was there before.
>
> How do I keep from having the same info drawn over and over, and how
> can I replace the info if the user makes a wrong selection?
>
> Below is the code I am using. A div called "new_page_toggl e" is given
> the result.
>
> // New page or not function
> function new_page(decisi on) {
> document.getEle mentById('new_p age_toggle').vl ue = "";
> if (decision == 'yes') {
> br_tag1 = document.create Element('br');
> br_tag2 = document.create Element('br');
> br_tag3 = document.create Element('br');
>
> title_text = document.create TextNode("Enter the title text to
> be displayed in the browser");
> bold_tag1 = document.create Element("B");
> bold_tag1.appen dChild(title_te xt);
> title_input = document.create Element('input' );
> title_input.set Attribute("type ", 'text');
> title_input.set Attribute("name ", 'browser_title' );
> title_input.set Attribute("id", 'browser_title' );
> title_input.set Attribute("size ", '127');
>
> disc_text = document.create TextNode("Enter the text to be
> displayed when found by internal search engine");
> bold_tag2 = document.create Element("B");
> bold_tag2.appen dChild(disc_tex t);
> disc_input = document.create Element('input' );
> disc_input.setA ttribute("type" , 'text');
> disc_input.setA ttribute("name" , 'search_desc');
> disc_input.setA ttribute("id", 'search_desc');
> disc_input.setA ttribute("size" , '127');
>
>
> document.getEle mentById('new_p age_toggle').ap pendChild(bold_ tag1);
>
> document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g1);
>
> document.getEle mentById('new_p age_toggle').ap pendChild(title _input);
>
> document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g2);
>
>
> document.getEle mentById('new_p age_toggle').ap pendChild(bold_ tag2);
>
> document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g3);
>
> document.getEle mentById('new_p age_toggle').ap pendChild(disc_ input);
>
> } else if (decision == 'no') {
> br_tag1 = document.create Element('br');
>
> url_text = document.create TextNode("Enter URL(s) of the
> page(s) to edit");
>
> document.getEle mentById('new_p age_toggle').ap pendChild(url_t ext);
>
> document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g1);
> for (i=1; i<=5; i++) {
> url_input = document.create Element('input' );
> url_input.setAt tribute("type", 'text');
> url_input.setAt tribute("name", 'url_'+i);
> url_input.setAt tribute("id", 'url_'+i);
> url_input.setAt tribute("size", '127');
>
> bold_tag = document.create Element("B");
> num = document.create TextNode(i+")-");
> bold_tag.append Child(num);
>
> br_tag2 = document.create Element('br');
>
> document.getEle mentById('new_p age_toggle').ap pendChild(bold_ tag);
>
> document.getEle mentById('new_p age_toggle').ap pendChild(url_i nput);
>
> document.getEle mentById('new_p age_toggle').ap pendChild(br_ta g2);
> }
> }
> }[/color]


Replace
document.getEle mentById('new_p age_toggle').va lue = "";

with
document.getEle mentById('new_p age_toggle').in nerHTML = "";

[Richard Cornford]

Re: Clearing it out

"McKirahan" <News@McKirahan .com> wrote in message
news:S6Rvc.4617 $%F2.3026@attbi _s04...
<snip>[color=blue]
> Replace
> document.getEle mentById('new_p age_toggle').va lue = "";
>
> with
> document.getEle mentById('new_p age_toggle').in nerHTML = "";[/color]

I would have thought that in a script that already extensively uses DOM
Level 2 Node manipulation methods the expected method of removing all of
the contents from a DIV would be:-

var divElement = document.getEle mentById('new_p age_toggle');
var divChildren = divElement.chil dNodes;
for(var c = divChildren.len gth;c--;){
divElement.remo veChild(divChil dren[c]);
}

- (or one of the many variations on that theme).

Richard.

[McKirahan]

Re: Clearing it out

"Richard Cornford" <richard@litote s.demon.co.uk> wrote in message
news:c9ont4$77t $1@titan.btinte rnet.com...[color=blue]
> "McKirahan" <News@McKirahan .com> wrote in message
> news:S6Rvc.4617 $%F2.3026@attbi _s04...
> <snip>[color=green]
> > Replace
> > document.getEle mentById('new_p age_toggle').va lue = "";
> >
> > with
> > document.getEle mentById('new_p age_toggle').in nerHTML = "";[/color]
>
> I would have thought that in a script that already extensively uses DOM
> Level 2 Node manipulation methods the expected method of removing all of
> the contents from a DIV would be:-
>
> var divElement = document.getEle mentById('new_p age_toggle');
> var divChildren = divElement.chil dNodes;
> for(var c = divChildren.len gth;c--;){
> divElement.remo veChild(divChil dren[c]);
> }
>
> - (or one of the many variations on that theme).
>
> Richard.[/color]


I'm sure you're right about using a "DOM Level 2 Node manipulation methods"
approach.

I just found something that worked and passed it on.

I tried the solution offered by "Ivo" but it failed on:

document.body.a ppendChild(newp agetoggle);

[Richard Cornford]

Re: Clearing it out

"McKirahan" wrote:
<snip>[color=blue]
> I tried the solution offered by "Ivo" but it failed on:
>
> document.body.a ppendChild(newp agetoggle);[/color]

Did it? I would have expected:-

| if(oldpagetoggl e) document.body.r emoveNode(oldpa getoggle);

- to have been a problem as - removeNode - is not a DOM Core method (I
think it is a Microsoft extension). But his code also makes the
assumption that the DIV in question is a direct child of the body.

Richard.