Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #10157 > unrolled thread

Cannot write to the DOM

Back to article view | Back to comp.lang.javascript

Contents

  Cannot write to the DOM RH <richkhall@gmail.com> - 2012-01-11 21:20 -0800
    Re: Cannot write to the DOM Tim Streater <timstreater@greenbee.net> - 2012-01-12 09:38 +0000
      Re: Cannot write to the DOM R Hall <richkhall@gmail.com> - 2012-01-12 18:52 -0800
    Re: Cannot write to the DOM "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-01-12 12:06 +0000
    Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-12 13:21 +0100
      Re: Cannot write to the DOM John G Harris <john@nospam.demon.co.uk> - 2012-01-13 17:06 +0000
        Re: Cannot write to the DOM Gene Wirchenko <genew@ocis.net> - 2012-01-13 11:38 -0800
        Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-13 22:23 +0100
          Re: Cannot write to the DOM John G Harris <john@nospam.demon.co.uk> - 2012-01-14 15:49 +0000
            Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-14 17:26 +0100
              Re: Cannot write to the DOM John G Harris <john@nospam.demon.co.uk> - 2012-01-15 14:19 +0000
                Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-15 19:45 +0100
                  Re: Cannot write to the DOM John G Harris <john@nospam.demon.co.uk> - 2012-01-16 10:40 +0000
                Re: Cannot write to the DOM Denis McMahon <denismfmcmahon@gmail.com> - 2012-01-15 20:56 +0000
    Re: Cannot write to the DOM Denis McMahon <denismfmcmahon@gmail.com> - 2012-01-12 14:00 +0000
      Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-12 18:32 +0100
    Re: Cannot write to the DOM RobG <rgqld@iinet.net.au> - 2012-01-17 19:26 -0800

#10157 — Cannot write to the DOM

I'm a newbie, and just starting to use javascript.  I've written a small program that simply adds an element to an unordered list in the DOM:

<body>
   <form>
      <input type="text" name="filePath" size="100" />
      <button id="add_button">Add Element</button>
   </form>
   <ul id="test"></ul>
   <script language="JavaScript" type="text/javascript" src="viewer.js">      
   </script>
</body>

script in viewer.js:

window.onload = init();

function init() {
   var button = document.getElementById("add_button");
   button.onclick = create;
}


function create() {
   // create the element in the DOM
   var listItemViewer = document.getElementById("test");
	
   var test = document.createElement("li");
   test.innerHTML = "test list item";
   listItemViewer.appendChild(test);
}

If I run it and click the add button, it flashes the "test list item" on the screen - if I single step it through the debugger, it shows that it puts the element in the DOM at the end of the create() function, but then it gets stripped out?  Can anyone help me understand why this is happening?

Thanks, 

[toc] | [next] | [standalone]

#10162

In article 
<3437926.47.1326345632135.JavaMail.geo-discussion-forums@yqiq10>,
 RH <richkhall@gmail.com> wrote:

> I'm a newbie, and just starting to use javascript.  I've written a small 
> program that simply adds an element to an unordered list in the DOM:
> 
> <body>
>    <form>
>       <input type="text" name="filePath" size="100" />
>       <button id="add_button">Add Element</button>
>    </form>
>    <ul id="test"></ul>
>    <script language="JavaScript" type="text/javascript" src="viewer.js">      
>    </script>
> </body>
> 
> script in viewer.js:
> 
> window.onload = init();
> 
> function init() {
>    var button = document.getElementById("add_button");
>    button.onclick = create;
> }
> 
> 
> function create() {
>    // create the element in the DOM
>    var listItemViewer = document.getElementById("test");
> 	
>    var test = document.createElement("li");
>    test.innerHTML = "test list item";
>    listItemViewer.appendChild(test);
> }
> 
> If I run it and click the add button, it flashes the "test list item" on the 
> screen - if I single step it through the debugger, it shows that it puts the 
> element in the DOM at the end of the create() function, but then it gets 
> stripped out?  Can anyone help me understand why this is happening?
> 
> Thanks, 


Your button needs to be like this:

  <button id="add_button" type="button">

otherwise it is a submit button. You click it and the form is submitted. 
And because in the <form> you did not specify an action, by default the 
action is to load your script again. So your <li> is added (and you see 
the flash), then the original script is reloaded and away it goes.

-- 
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted"  --  Bill of Rights 1689

[toc] | [prev] | [next] | [standalone]

#10194

Thanks - I didn't realize the form tag would cause a button submit by default.
It did the trick.

[toc] | [prev] | [next] | [standalone]

#10163

RH wrote on 12 jan 2012 in comp.lang.javascript:

> I'm a newbie, and just starting to use javascript.  I've written a
> small program that simply adds an element to an unordered list in the
> DOM: 
> 
> <body>
>    <form>
>       <input type="text" name="filePath" size="100" />
>       <button id="add_button">Add Element</button>
>    </form>
>    <ul id="test"></ul>
>    <script language="JavaScript" type="text/javascript"

Skip the language="JavaScript", that is of last century.
When testing, better use on-page javascript. 
The script should be in the <head> section, no reason to put it here.

>    src="viewer.js">      </script>
> </body>
> 
> script in viewer.js:
> 
> window.onload = init();
> 
> function init() {
>    var button = document.getElementById("add_button");
>    button.onclick = create;
>}
> 
> 
> function create() {
>    // create the element in the DOM
>    var listItemViewer = document.getElementById("test");
>      
>    var test = document.createElement("li");
>    test.innerHTML = "test list item";
>    listItemViewer.appendChild(test);

return false; <- this is your error!

>}

without the return false, <form> execution will take place overwriting 
the old page.

 
> If I run it and click the add button, it flashes the "test list item"
> on the screen - if I single step it through the debugger, it shows
> that it puts the element in the DOM at the end of the create()
> function, but then it gets stripped out?  Can anyone help me
> understand why this is happening? 
> 
> Thanks,
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#10164

RH wrote:

> I'm a newbie, and just starting to use javascript.

There is no "javascript".  You are using JavaScript, JScript or something 
else, depending on the runtime environment (the browser).  All of them are 
ECMAScript implementations and share most of the syntax elements.

> I've written a small program that simply adds an element to an unordered
> list in the DOM:

The DOM (Document Object Model) is an API.  You are adding an element to the 
_document tree_ instead.
 
> <body>
>    <form>
>       <input type="text" name="filePath" size="100" />
>       <button id="add_button">Add Element</button>
>    </form>
>    <ul id="test"></ul>
>    <script language="JavaScript" type="text/javascript" src="viewer.js">
>    </script>
> </body>
> 
> script in viewer.js:
> 
> window.onload = init();
> 
> function init() {
>    var button = document.getElementById("add_button");
>    button.onclick = create;
> }
> 
> 
> function create() {
>    // create the element in the DOM
>    var listItemViewer = document.getElementById("test");
> 
>    var test = document.createElement("li");
>    test.innerHTML = "test list item";
>    listItemViewer.appendChild(test);
> }
> 
> If I run it and click the add button, it flashes the "test list item" on
> the screen - if I single step it through the debugger, it shows that it
> puts the element in the DOM at the end of the create() function, but then
> it gets stripped out?  Can anyone help me understand why this is
> happening?

Possibility: Because your underlying markup is not Valid [1], there is no 
such `ul' element object in the document tree.  `ul' elements must have a 
child `li' element from the start.  You can either provide it with one in 
the markup, or create the `ul' element and the `li' element with scripting.

You should also avoid using `innerHTML' for appending plain text.  And if 
the button should work only with scripting anyway, you can simply use the 
corresponding attribute (you should avoid `window.onload' anyway).

Consider this:

viewer.js:

  var ul = null;

  function create()
  {
    // create the element in the DOM
    if (!ul)
    {
      ul = document.createElement("ul");
    }

    if (ul)
    {
      var li = document.createElement("li");
      if (li)
      {
        li.appendChild(document.createTextNode("test list item"));
        ul.appendChild(li);
        document.body.appendChild(ul);
      }
    }
  }

In the HTML5 document (it is not Valid HTML4, the `form' element would need 
an `action' attribute there):

  <body>
    <form>
      <input type="text" name="filePath" size="100">
      <button type="button" onclick="create()">Add Element</button>
    </form>
 </body>

Please note that the `button' element has compatibility issues (particularly 
in IE), so for simple buttons you should use `<input type="button" 
value="…">' instead.


HTH

PointedEars
___________
[1] <http://validator.w3.org/>
-- 
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[toc] | [prev] | [next] | [standalone]

#10215

On Thu, 12 Jan 2012 at 13:21:37, in comp.lang.javascript, Thomas
'PointedEars' Lahn wrote:
>RH wrote:
>
>> I'm a newbie, and just starting to use javascript.
>
>There is no "javascript".

One day Thomas will amaze us by suggesting an alternative word or phrase
to replace 'javascript' (all lower case) to describe any or all of these
languages. But if the name is more than 3 words long it's going to be
ignored.


>You are using JavaScript, JScript or something
>else, depending on the runtime environment (the browser).  All of them are
>ECMAScript implementations and share most of the syntax elements.

All of them are only partly ECMAScript implementations. Access routes to
the DOM objects, or equivalent, are outside ECMAScript.


>> I've written a small program that simply adds an element to an unordered
>> list in the DOM:
>
>The DOM (Document Object Model) is an API.  You are adding an element to the
>_document tree_ instead.
  <snip>

Equally correct is to say he is adding an element to the document.


  John
-- 
John Harris

[toc] | [prev] | [next] | [standalone]

#10217

On Fri, 13 Jan 2012 17:06:25 +0000, John G Harris
<john@nospam.demon.co.uk> wrote:

>On Thu, 12 Jan 2012 at 13:21:37, in comp.lang.javascript, Thomas
>'PointedEars' Lahn wrote:
>>RH wrote:
>>
>>> I'm a newbie, and just starting to use javascript.
>>
>>There is no "javascript".

     Yes, there is.  It is the third word in the name of this
newsgroup:
          comp.lang.javascript
                    ^^^^^^^^^^
Look!  There it is!

>One day Thomas will amaze us by suggesting an alternative word or phrase
>to replace 'javascript' (all lower case) to describe any or all of these
>languages. But if the name is more than 3 words long it's going to be
>ignored.

     The glass is half-full?

[snip]

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#10220

John G Harris wrote:

> Thomas 'PointedEars' Lahn wrote:
>> RH wrote:
>>> I'm a newbie, and just starting to use javascript.
>> There is no "javascript".
> 
> One day Thomas will amaze us by suggesting an alternative word or phrase
> to replace 'javascript' (all lower case) to describe any or all of these
> languages.

BTDT.

> But if the name is more than 3 words long it's going to be ignored.

It has two words, three at most.

>>You are using JavaScript, JScript or something
>>else, depending on the runtime environment (the browser).  All of them are
>>ECMAScript implementations and share most of the syntax elements.
> 
> All of them are only partly ECMAScript implementations. Access routes to
> the DOM objects, or equivalent, are outside ECMAScript.

The APIs available for use with a programming language do not change the 
nature of that programming language.

>>> I've written a small program that simply adds an element to an unordered
>>> list in the DOM:
>> The DOM (Document Object Model) is an API.  You are adding an element to
>> the _document tree_ instead.
>   <snip>
> 
> Equally correct is to say he is adding an element to the document.

No, because the underlying markup does _not_ change.


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).

[toc] | [prev] | [next] | [standalone]

#10226

On Fri, 13 Jan 2012 at 22:23:20, in comp.lang.javascript, Thomas
'PointedEars' Lahn wrote:
>John G Harris wrote:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> RH wrote:
>>>> I'm a newbie, and just starting to use javascript.
>>> There is no "javascript".
>>
>> One day Thomas will amaze us by suggesting an alternative word or phrase
>> to replace 'javascript' (all lower case) to describe any or all of these
>> languages.
>
>BTDT.

Remind us.

I only remember your description of this group's Topic. It was
deficient.



>> But if the name is more than 3 words long it's going to be ignored.
>
>It has two words, three at most.

>>>You are using JavaScript, JScript or something
>>>else, depending on the runtime environment (the browser).  All of them are
>>>ECMAScript implementations and share most of the syntax elements.
>>
>> All of them are only partly ECMAScript implementations. Access routes to
>> the DOM objects, or equivalent, are outside ECMAScript.
>
>The APIs available for use with a programming language do not change the
>nature of that programming language.

In C++, Java, Pascal and some other languages the standard library is
required for conformance to the language standard.

In JavaScript, JScript, etc the DOM objects are also required, even
though Mozilla, Microsoft, etc wouldn't dream of publishing their
standards.



>>>> I've written a small program that simply adds an element to an unordered
>>>> list in the DOM:
>>> The DOM (Document Object Model) is an API.  You are adding an element to
>>> the _document tree_ instead.
>>   <snip>
>>
>> Equally correct is to say he is adding an element to the document.
>
>No, because the underlying markup does _not_ change.

The original document text doesn't change, but the current document
text, rendered from the current parse tree, alias document tree, does.


  John
-- 
John Harris

[toc] | [prev] | [next] | [standalone]

#10227

John G Harris wrote:

> In JavaScript, JScript, etc the DOM objects are also required, even
> though Mozilla, Microsoft, etc wouldn't dream of publishing their
> standards.

You have no clue what you are talking about.


PointedEars
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

[toc] | [prev] | [next] | [standalone]

#10243

On Sat, 14 Jan 2012 at 17:26:24, in comp.lang.javascript, Thomas
'PointedEars' Lahn wrote:
>John G Harris wrote:
>
>> In JavaScript, JScript, etc the DOM objects are also required, even
>> though Mozilla, Microsoft, etc wouldn't dream of publishing their
>> standards.
>
>You have no clue what you are talking about.

It's looking as though you don't know enough to form a valid opinion on
that.

  John
-- 
John Harris

[toc] | [prev] | [next] | [standalone]

#10260

John G Harris wrote:

> Thomas 'PointedEars' Lahn wrote:
>> John G Harris wrote:
>>> In JavaScript, JScript, etc the DOM objects are also required, even
>>> though Mozilla, Microsoft, etc wouldn't dream of publishing their
>>> standards.
>> You have no clue what you are talking about.
> 
> It's looking as though you don't know enough to form a valid opinion on
> that.

I do know that it is wrong that "in JavaScript, JScript, etc the DOM objects 
are also required", and I know that not only "Mozilla, Microsoft, etc" do 
not make their own standards, but that they document their language and DOM 
implementations fairly well (up to the point of publishing the source code).  
Which is such basic knowledge that your evidently lacking it sufficed for me 
to make that assessment (not stating an opinion).


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).

[toc] | [prev] | [next] | [standalone]

#10291

On Sun, 15 Jan 2012 at 19:45:37, in comp.lang.javascript, Thomas
'PointedEars' Lahn wrote:
>John G Harris wrote:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> John G Harris wrote:
>>>> In JavaScript, JScript, etc the DOM objects are also required, even
>>>> though Mozilla, Microsoft, etc wouldn't dream of publishing their
>>>> standards.
>>> You have no clue what you are talking about.
>>
>> It's looking as though you don't know enough to form a valid opinion on
>> that.
>
>I do know that it is wrong that "in JavaScript, JScript, etc the DOM objects
>are also required", and I know that not only "Mozilla, Microsoft, etc" do
>not make their own standards, but that they document their language and DOM
>implementations fairly well (up to the point of publishing the source code).
>Which is such basic knowledge that your evidently lacking it sufficed for me
>to make that assessment (not stating an opinion).

Microsoft's JScript reference includes the items
  comment statement
  function statement
  this statement
but not
  block (not even as compound statement).

I rest my case.

And people who have the delusion that the compiler's source code
specifies a language are mad.

  John
-- 
John Harris

[toc] | [prev] | [next] | [standalone]

#10271

On Sun, 15 Jan 2012 14:19:58 +0000, John G Harris wrote:

[re TPELtroll]

> It's looking as though you don't know enough to form a valid opinion on
> that.

All he knows how to do is post "You're wrong" or some variation of.

His explanation as to why anything is wrong is invariably "go read the 
spec".

He never seems to suggest an alternative that might be "correct".

I gave up reading his posts a long time ago. Even if he knew more than 
anyone else on the planet about javascript / html / css / php etc, it 
would be impossible to determine determine this from his "contributions" 
here, because they seem to consist solely of comments like "that's wrong".

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#10166

On Wed, 11 Jan 2012 21:20:32 -0800, RH wrote:

> function create() {
>    // create the element in the DOM
>    var listItemViewer = document.getElementById("test");
> 	
>    var test = document.createElement("li"); test.innerHTML = "test list
>    item";
>    listItemViewer.appendChild(test);
> }

What the others said, but in addition, maybe this is a better create():

function create() {
    var listItemViewer = document.getElementById("test");
    var test = document.createElement("li");
    test.appendChild(document.createTextNode("test list item"));
    listItemViewer.appendChild(test);
}

If you're going to use dom functions to create the list element, you 
might as well (some might even suggest should) also use the dom functions 
to add its content instead of innerHTML.

Otherwise, if you're going to use innerHTML, why not just:

function create() {
    var listItemViewer = document.getElementById("test");
    listItemViewer.innerHTML = listItemViewer.innerHTML + "<li>test list 
item</li>";
}

which is in my opinion a crude, reckless and some might even suggest 
bloody stupid way of doing it.

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#10179

Denis McMahon wrote:

> On Wed, 11 Jan 2012 21:20:32 -0800, RH wrote:
>> function create() {
>>    // create the element in the DOM
>>    var listItemViewer = document.getElementById("test");
>> 
>>    var test = document.createElement("li"); test.innerHTML = "test list
>>    item";
>>    listItemViewer.appendChild(test);
>> }
> 
> What the others said, but in addition, maybe this is a better create():
> 
> function create() {
>     var listItemViewer = document.getElementById("test");
>     var test = document.createElement("li");
>     test.appendChild(document.createTextNode("test list item"));
>     listItemViewer.appendChild(test);
> }
> 
> If you're going to use dom functions to create the list element, you
> might as well (some might even suggest should) also use the dom functions
> to add its content instead of innerHTML.

It is inefficient to retrieve the element object reference on every click.  
So you should cache that somehow.  However, if you are using this function 
then you must by definition have either an empty `li' element in the 
document already (which is not modified by this code, which would be a 
rather bad idea) or you must create the `ul' element dynamically, in which 
case you have the element object reference already (as I showed).
 

PointedEars
-- 
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

[toc] | [prev] | [next] | [standalone]

#10348

On Jan 12, 3:20 pm, RH <richkh...@gmail.com> wrote:
> I'm a newbie, and just starting to use javascript.  I've written a small program that simply adds an element to an unordered list in the DOM:
[...]
> window.onload = init();

If it is expected that a result of the above is that the init function
will be called when the load event occurs, then that expectation will
not be met.

The call to init will be executed immediatelly and the result
(undefined) assigned to the onload property of the window object. It
"works" in this case only because the script element is placed below
the DOM element it depends upon to sucessfully complete.

Move the script to the head (where scripts are more commonly placed)
and it will fail with an error at the point of attempting to call
button.onclick, since button will be null (as the element with id
"add_button" does not exist in the DOM yet).

> function init() {
>    var button = document.getElementById("add_button");
>    button.onclick = create;
> }


--
Rob

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web