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_toggle" is given
the result.

// New page or not function
function new_page(decision) {
document.getElementById('new_page_toggle').vlue = "";
if (decision == 'yes') {
br_tag1 = document.createElement('br');
br_tag2 = document.createElement('br');
br_tag3 = document.createElement('br');

title_text = document.createTextNode("Enter the title text to
be displayed in the browser");
bold_tag1 = document.createElement("B");
bold_tag1.appendChild(title_text);
title_input = document.createElement('input');
title_input.setAttribute("type", 'text');
title_input.setAttribute("name", 'browser_title');
title_input.setAttribute("id", 'browser_title');
title_input.setAttribute("size", '127');

disc_text = document.createTextNode("Enter the text to be
displayed when found by internal search engine");
bold_tag2 = document.createElement("B");
bold_tag2.appendChild(disc_text);
disc_input = document.createElement('input');
disc_input.setAttribute("type", 'text');
disc_input.setAttribute("name", 'search_desc');
disc_input.setAttribute("id", 'search_desc');
disc_input.setAttribute("size", '127');


document.getElementById('new_page_toggle').appendChild(bold_tag1);

document.getElementById('new_page_toggle').appendChild(br_tag1);

document.getElementById('new_page_toggle').appendChild(title_input);

document.getElementById('new_page_toggle').appendChild(br_tag2);


document.getElementById('new_page_toggle').appendChild(bold_tag2);

document.getElementById('new_page_toggle').appendChild(br_tag3);

document.getElementById('new_page_toggle').appendChild(disc_input);

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

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

document.getElementById('new_page_toggle').appendChild(url_text);

document.getElementById('new_page_toggle').appendChild(br_tag1);
for (i=1; i<=5; i++) {
url_input = document.createElement('input');
url_input.setAttribute("type", 'text');
url_input.setAttribute("name", 'url_'+i);
url_input.setAttribute("id", 'url_'+i);
url_input.setAttribute("size", '127');

bold_tag = document.createElement("B");
num = document.createTextNode(i+")-");
bold_tag.appendChild(num);

br_tag2 = document.createElement('br');

document.getElementById('new_page_toggle').appendChild(bold_tag);

document.getElementById('new_page_toggle').appendChild(url_input);

document.getElementById('new_page_toggle').appendChild(br_tag2);
}
}
}

 

[Ivo]

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_toggle" is
given the result.

Remove the div from the DOM and re-create it:
var oldpagetoggle = document.getElementById('new_page_toggle');
if(oldpagetoggle) document.body.removeNode(oldpagetoggle);
var newpagetoggle=document.createElement('div');
newpagetoggle.id='new_page_toggle';
document.body.appendChild(newpagetoggle);

HTH
Ivo

 

[McKirahan]

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_toggle" is given
the result.

// New page or not function
function new_page(decision) {
document.getElementById('new_page_toggle').vlue = "";
if (decision == 'yes') {
br_tag1 = document.createElement('br');
br_tag2 = document.createElement('br');
br_tag3 = document.createElement('br');

title_text = document.createTextNode("Enter the title text to
be displayed in the browser");
bold_tag1 = document.createElement("B");
bold_tag1.appendChild(title_text);
title_input = document.createElement('input');
title_input.setAttribute("type", 'text');
title_input.setAttribute("name", 'browser_title');
title_input.setAttribute("id", 'browser_title');
title_input.setAttribute("size", '127');

disc_text = document.createTextNode("Enter the text to be
displayed when found by internal search engine");
bold_tag2 = document.createElement("B");
bold_tag2.appendChild(disc_text);
disc_input = document.createElement('input');
disc_input.setAttribute("type", 'text');
disc_input.setAttribute("name", 'search_desc');
disc_input.setAttribute("id", 'search_desc');
disc_input.setAttribute("size", '127');


document.getElementById('new_page_toggle').appendChild(bold_tag1);

document.getElementById('new_page_toggle').appendChild(br_tag1);

document.getElementById('new_page_toggle').appendChild(title_input);

document.getElementById('new_page_toggle').appendChild(br_tag2);


document.getElementById('new_page_toggle').appendChild(bold_tag2);

document.getElementById('new_page_toggle').appendChild(br_tag3);

document.getElementById('new_page_toggle').appendChild(disc_input);

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

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

document.getElementById('new_page_toggle').appendChild(url_text);

document.getElementById('new_page_toggle').appendChild(br_tag1);
for (i=1; i<=5; i++) {
url_input = document.createElement('input');
url_input.setAttribute("type", 'text');
url_input.setAttribute("name", 'url_'+i);
url_input.setAttribute("id", 'url_'+i);
url_input.setAttribute("size", '127');

bold_tag = document.createElement("B");
num = document.createTextNode(i+")-");
bold_tag.appendChild(num);

br_tag2 = document.createElement('br');

document.getElementById('new_page_toggle').appendChild(bold_tag);

document.getElementById('new_page_toggle').appendChild(url_input);

document.getElementById('new_page_toggle').appendChild(br_tag2);
}
}
}

Replace
document.getElementById('new_page_toggle').value = "";

with
document.getElementById('new_page_toggle').innerHTML = "";

 

[Richard Cornford]

Replace
document.getElementById('new_page_toggle').value = "";

with
document.getElementById('new_page_toggle').innerHTML = "";

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.getElementById('new_page_toggle');
var divChildren = divElement.childNodes;
for(var c = divChildren.length;c--{
divElement.removeChild(divChildren[c]);
}

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

Richard.

 

[McKirahan]

Replace
document.getElementById('new_page_toggle').value = "";

with
document.getElementById('new_page_toggle').innerHTML = "";

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.getElementById('new_page_toggle');
var divChildren = divElement.childNodes;
for(var c = divChildren.length;c--{
divElement.removeChild(divChildren[c]);
}

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

Richard.

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.appendChild(newpagetoggle);

 

[Richard Cornford]

:

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

document.body.appendChild(newpagetoggle);

Did it? I would have expected:-

| if(oldpagetoggle) document.body.removeNode(oldpagetoggle);

- 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.