473,387 Members | 1,515 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

document.getElementById / appendChild

Hi, I'm having a problem utilizing the DOM. I tried using my own
code, but it wasn't working, so I tried to use code straight from
another web site and it verified that the problem may not be mine. I
am using IE 6.0.28 (sp5) on a Windows 2000 Server.

I am very new to DOM so I'm not ruling out that I'm doing something
wrong. However, I am posting the code that I got from another site
because I did notice that the examples were using Netscape. I'm
curious to know if there are differences between Netscape and IE for
DOM? Anyway the site that the code came from is
http://www-106.ibm.com/developerwork...jsdom/#figure2
and seems like it should work. I'm hoping somebody can help. Thank
you in advance.... Chris

<%@ Language=VBScript %>
<html>
<head>
<title>Getting Sticky</title>
<style type="text/css">
* {font-family: sans-serif}
a {font-size: 6pt}
.editButton {font-size:6pt}
</style>

<script type="text/javascript">
function getCurrentNumber() {
formElement = document.getElementById("noteForm");
return formElement.childNodes.item(1).value;
}

function makeNewNote(){
mainDivElement = document.getElementById("mainDiv");
newNote = document.createElement("div");
newNote.setAttribute("id", "note"+getCurrentNumber());
mainDivElement.appendChild(newNote);
noteForm.total.value= parseInt(noteForm.total.value) + 1;
}
</script>
</head>
<body>
<div id="mainDiv" style="height:85%; width:85%; border:3px solid
red;
padding: 10px; z-index:
-100" >

<h1>Getting Sticky</h1>

<form id="noteForm">
Current number of notes
<input type="text" name="total" value="0"size="3"/>
<input type="button" value="Add a new note"
onclick="makeNewNote()" />
</form>
<div id="addhere"> </div>

</div>
</body>
</html>

Jul 20 '05 #1
2 22208


Chris wrote:
Hi, I'm having a problem utilizing the DOM. I tried using my own
code, but it wasn't working, so I tried to use code straight from
another web site and it verified that the problem may not be mine. I
am using IE 6.0.28 (sp5) on a Windows 2000 Server.

I am very new to DOM so I'm not ruling out that I'm doing something
wrong. However, I am posting the code that I got from another site
because I did notice that the examples were using Netscape. I'm
curious to know if there are differences between Netscape and IE for
DOM? Anyway the site that the code came from is
http://www-106.ibm.com/developerwork...jsdom/#figure2
and seems like it should work. I'm hoping somebody can help. Thank
you in advance.... Chris

<%@ Language=VBScript %>
<html>
<head>
<title>Getting Sticky</title>
<style type="text/css">
* {font-family: sans-serif}
a {font-size: 6pt}
.editButton {font-size:6pt}
</style>

<script type="text/javascript">
function getCurrentNumber() {
formElement = document.getElementById("noteForm");
return formElement.childNodes.item(1).value;
Using childNodes is a potential problem as IE for instance keeps only
element nodes in childNodes while it throws out white space text nodes
between element nodes. Netscape however keeps the white space text nodes
in the DOM and therefore an expression like
element.childNodes.item(1)
is probabably selecting a different node in IE and Netscape. }

function makeNewNote(){
mainDivElement = document.getElementById("mainDiv");
newNote = document.createElement("div");
newNote.setAttribute("id", "note"+getCurrentNumber());
mainDivElement.appendChild(newNote);
noteForm.total.value= parseInt(noteForm.total.value) + 1;
}
</script>
</head>
<body>
<div id="mainDiv" style="height:85%; width:85%; border:3px solid
red;
padding: 10px; z-index:
-100" >

<h1>Getting Sticky</h1>

<form id="noteForm">
Current number of notes
<input type="text" name="total" value="0"size="3"/>
<input type="button" value="Add a new note"
onclick="makeNewNote()" />
</form>
<div id="addhere"> </div>

</div>
</body>
</html>


--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #2
Martin Honnen wrote:
Chris wrote:
Hi, I'm having a problem utilizing the DOM. I tried using my own
code, but it wasn't working, so I tried to use code straight from
another web site and it verified that the problem may not be mine. I
am using IE 6.0.28 (sp5) on a Windows 2000 Server.

I am very new to DOM so I'm not ruling out that I'm doing something
wrong. However, I am posting the code that I got from another site
because I did notice that the examples were using Netscape. I'm
curious to know if there are differences between Netscape and IE for
DOM? Anyway the site that the code came from is
http://www-106.ibm.com/developerwork...jsdom/#figure2
and seems like it should work. I'm hoping somebody can help. Thank
you in advance.... Chris

<%@ Language=VBScript %>
<html>
<head>
<title>Getting Sticky</title>
<style type="text/css">
* {font-family: sans-serif}
a {font-size: 6pt}
.editButton {font-size:6pt}
</style>

<script type="text/javascript">
function getCurrentNumber() {
formElement = document.getElementById("noteForm");
return formElement.childNodes.item(1).value;


Using childNodes is a potential problem as IE for instance keeps only
element nodes in childNodes while it throws out white space text nodes
between element nodes. Netscape however keeps the white space text nodes
in the DOM and therefore an expression like
element.childNodes.item(1)
is probabably selecting a different node in IE and Netscape.


I can't remember who pointed me to this, but here is a good resource on the
"problem" described above.

<url: http://www.mozilla.org/docs/dom/technote/whitespace/ />

Using "nodomws.js" supplied there, you could re-write the function as:

function getCurrentNumber() {
formElement = document.getElementById("noteForm");
var theNode = node_before(node_after(formElement.childNodes.item (1)));
if (theNode != null) {
return theNode.value;
} else {
return '';
}
}

and it will work in both IE and Mozilla, regardless of whitespace
distribution. It messes things up a little because it makes
childNodes.item(1) the first element in the form (when it should really be
childNodes.item(0)), but a simple modification to node_after() would fix
that if you were so inclined.

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Stumped and Confused | last post by:
Hello, I really, really, need some help here - I've spent hours trying to find a solution. In a nutshell, I'm trying to have a user input a value in form's textfield. The value should then be...
2
by: Deryck | last post by:
Hi, I am trying to update part of a webpage using javascript. The bit that gets updated will have a variable number of links written to it. I have done this successfully by rewriting the whole...
8
by: Sergio Otoya | last post by:
Hi all, I need to add an input hidden field to an existing form (post). I have tried a couple things like adding the '<INPUT type=hidden name=idSelectedURL value=http://server/documents>' to...
10
by: andreister | last post by:
He there! I've discovered that the ================================================= document.links('link_id_here').href = "something"; ================================================= is...
7
by: Andrea | last post by:
Hi there - I'm hoping someone can help me; I've been struggling with this for a few days! :-) I have a webpage that is comprised of many forms containing questions. As the user answers one...
2
by: ethandbrown | last post by:
Hi All-- I'm a bit stymied here. I need to display arbitrary HTML obtained through AJAX. The problem is when a <script> block is encountered one can't use innerHTML to set the content, because...
5
by: Jeremy | last post by:
Does anyone have a clever algorithm for generating an outline of the current document from (client-side) javascript using DOM methods? For example, let's say I predictably have a document...
7
by: sj071 | last post by:
I'm little more than a novice when it comes to javascript, and this particular problem has been driving me mad for the past few days... The Problem: I have a javascript file that uses...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.