Super basic newbie question

Just getting started in javascript. This is my very first script.

I have a very simple web page with a text entry field:

<input type="text" id='filterValue" size=20>

In my javascript function I want to get each keystroke from that
field, and write it out. So I have:

window.onload = function() {
document.getElementById("filterValue").onkeypress = function() {
var val = document.getElementById("filterValue").value;
document.write("<p>" + val + "</p>");
}
}

But when I load the page I get this in the web console:

[07:12:13.071] document.getElementById("filterValue") is null

If I display the page source, I see the field with the matching id:

<input type="text" id='filterValue" size=20>

Why is it not being found? What am I doing wrong here?

TIA!
-larry

Larry.Martell@gmail.com wrote:
> Just getting started in javascript. This is my very first script.
>
> I have a very simple web page with a text entry field:
>
> <input type="text" id='filterValue" size=20>
>
> In my javascript function I want to get each keystroke from that
> field, and write it out. So I have:
>
> window.onload = function() {
> document.getElementById("filterValue").onkeypress = function() {
> var val = document.getElementById("filterValue").value;
> document.write("<p>" + val +"</p>");

Forget about document.write unless you want to use it during page load
or unless you want to completely overwrite the loaded page after page load.
After page load, to create new nodes and insert them use e.g
var p = document.createElement('p');
p.appendChild(document.createTextNode(val));
document.body.appendChild(p);
where obviously document.body is meant as an example, you can instead
select some other target parent element for the newly created 'p'
element and appendChild it there.



--

Martin Honnen --- MVP Data Platform Development
http://msmvps.com/blogs/martin_honnen/

"Larry.Martell@gmail.com" <larry.martell@gmail.com> schreef in bericht
news:aaa3f536-d041-47fd-9c0c-2b158d5b82ee@x7g2000pbi.googlegroups.com...
> Just getting started in javascript. This is my very first script.
>
> I have a very simple web page with a text entry field:
>
> <input type="text" id='filterValue" size=20>
>
> In my javascript function I want to get each keystroke from that
> field, and write it out. So I have:
>
> window.onload = function() {
> document.getElementById("filterValue").onkeypress = function() {
> var val = document.getElementById("filterValue").value;
> document.write("<p>" + val + "</p>");
> }
> }
>

I am a newby myself, so I may easily be corrected.
Check out document.write. It will create a new execution context. Thus you
loose everything you thought you had declared.
Also check 'this'. Within the onkeypress function you ought to be able to
refer to the control that handled the event via .this.
Tom

Le 08/03/12 15:51, Larry.Martell@gmail.com a écrit :
> If I display the page source, I see the field with the matching id:
>
> <input type="text" id='filterValue" size=20>
>
> Why is it not being found? What am I doing wrong here?

your html is wrong,
maybe better with :

<input type="text" id="filterValue" size=20>

error : 'blah" (with ' and ")

use: ' and '
or: " and "

--
Stéphane Moriaux avec/with iMac-intel

2012-03-08 16:51, Larry.Martell@gmail.com wrote:

> I have a very simple web page with a text entry field:
>
> <input type="text" id='filterValue" size=20>

There is a syntax error there: the id attribute value starts with the
apostrophe ('), but where is the closing apostrophe? Your actual page
might be OK in this respect. We cannot know because you did not post the
URL.

> In my javascript function I want to get each keystroke from that
> field, and write it out. So I have:
>
> window.onload = function() {
> document.getElementById("filterValue").onkeypress = function() {
> var val = document.getElementById("filterValue").value;
> document.write("<p>" + val +"</p>");
> }
> }
>
> But when I load the page I get this in the web console:
>
> [07:12:13.071] document.getElementById("filterValue") is null

The error in id='filterValue" can have odd effects, depending on what
comes next in the HTML source. But perhaps more probably, the _real_
error on the page is yet something else, such as 'filterValue"'.

Moreover, using document.write() is a no-no when you are in an event
handler. The following is a working approach:

<input type=text id=filterValue size=20>
<p id=stuff>
<script>
window.onload = function() {
document.getElementById('filterValue').onkeypress = function() {
document.getElementById('stuff').innerHTML = this.value;
}
}
</script>

It's not a bug that when you test this, the characters appear in a
delayed manner. When you are handling a keypress event, the character
has not yet been consumed so that it gives its contribution to the input
element's content.


--
Yucca, http://www.cs.tut.fi/~jkorpela/

On Thu, 8 Mar 2012 06:51:08 -0800 (PST), "Larry.Martell@gmail.com"
<larry.martell@gmail.com> wrote:

>Just getting started in javascript. This is my very first script.

Say what?

I have been digging into JavaScript for months and have only
recently gotten into dealing with that level on character input, and I
have not gotten into creating functions on the fly.

>I have a very simple web page with a text entry field:
>
><input type="text" id='filterValue" size=20>
^ ^
Mismatched quotes.

>In my javascript function I want to get each keystroke from that
>field, and write it out. So I have:

But you are not doing that. You are writing out the control
value and that before the character just entered is added.

>window.onload = function() {
> document.getElementById("filterValue").onkeypress = function() {
> var val = document.getElementById("filterValue").value;
> document.write("<p>" + val + "</p>");
^^^^^^^^^^^^^^
This wipes out your page.

> }
>}

If you want the character itself, try the following. Watch the
line breaks do not mess you up.

***** Start of Included Code *****
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>2012-03-08: Showing Input</title>
</head>

<body>

<script type="text/javascript">

window.onload = function() {
document.getElementById("filterValue").onkeypress =
function(theEvent) {
// theEvent // event: event that fired (assumed to be keyboard
event)
var theKey=theEvent.which;
alert(theKey);
return true;
}
}

</script>

<input type="text" id="filterValue" size=20>
<input type="text" size=20>

</body>
</html>
***** End of Included Code *****

>But when I load the page I get this in the web console:
>
>[07:12:13.071] document.getElementById("filterValue") is null

On my system, this was dealt with by correcting the mismatched
quotes.

>If I display the page source, I see the field with the matching id:
>
><input type="text" id='filterValue" size=20>
>
>Why is it not being found? What am I doing wrong here?

Because your document.write() wiped it out.

Sincerely,

Sincerely,

Gene Wirchenko

On Thu, 08 Mar 2012 06:51:08 -0800, Larry.Martell@gmail.com wrote:

> I have a very simple web page with a text entry field:
>
> <input type="text" id='filterValue" size=20>
>
> In my javascript function I want to get each keystroke from that field,
> and write it out. So I have:
>
> window.onload = function() {
> document.getElementById("filterValue").onkeypress = function() {
> var val = document.getElementById("filterValue").value;
> document.write("<p>" + val + "</p>");
> }
> }
>
> But when I load the page I get this in the web console:
>
> [07:12:13.071] document.getElementById("filterValue") is null
>
> If I display the page source, I see the field with the matching id:
>
> <input type="text" id='filterValue" size=20>
>
> Why is it not being found? What am I doing wrong here?

On top of anything else that has been mentioned, attempting to evaluate:

document.getElementById("filterValue")

before the element exists on the page is, fundamentally, what is causing
the problem?

Rgds

Denis McMahon

On Mar 8, 8:04*am, Martin Honnen <mahotr...@yahoo.de> wrote:
> Larry.Mart...@gmail.com wrote:
> > Just getting started in javascript. This is my very first script.
>
> > I have a very simple web page with a text entry field:
>
> > <input type="text" id='filterValue" size=20>
>
> > In my javascript function I want to get each keystroke from that
> > field, and write it out. So I have:
>
> > window.onload = function() {
> > * * *document.getElementById("filterValue").onkeypress = function() {
> > * * * * *var val = document.getElementById("filterValue").value;
> > * * * * *document.write("<p>" + val +"</p>");
>
> Forget about document.write unless you want to use it during page load
> or unless you want to completely overwrite the loaded page after page load.
> After page load, to create new nodes and insert them use e.g
> * *var p = document.createElement('p');
> * *p.appendChild(document.createTextNode(val));
> * *document.body.appendChild(p);
> where obviously document.body is meant as an example, you can instead
> select some other target parent element for the newly created 'p'
> element and appendChild it there.
* * *http://msmvps.com/blogs/martin_honnen/

The document.write was just a test to see if my function was being
called and was working. You totally missed the point of my issue,
which was that getElementById was returning null.

On Mar 8, 8:10*am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
> Le 08/03/12 15:51, Larry.Mart...@gmail.com a écrit :
>
> > If I display the page source, I see the field with the matching id:
>
> > <input type="text" id='filterValue" size=20>
>
> > Why is it not being found? What am I doing wrong here?
>
> your html is wrong,
> maybe better with :
>
> * * * * <input type="text" id="filterValue" size=20>
>
> error : 'blah" (with ' and ")
>
> use: ' and '
> * or: " and "

Yes, that was the problem. Thanks. That's what I get for coding at
4am.

On Mar 8, 8:17*am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> 2012-03-08 16:51, Larry.Mart...@gmail.com wrote:
> > I have a very simple web page with a text entry field:
>
> > <input type="text" id='filterValue" size=20>
>
> There is a syntax error there: the id attribute value starts with the
> apostrophe ('), but where is the closing apostrophe? Your actual page
> might be OK in this respect. We cannot know because you did not post the
> URL.

Yes, that's what the problem was. Thanks.

>
> > In my javascript function I want to get each keystroke from that
> > field, and write it out. So I have:
>
> > window.onload = function() {
> > * * *document.getElementById("filterValue").onkeypress = function() {
> > * * * * *var val = document.getElementById("filterValue").value;
> > * * * * *document.write("<p>" + val +"</p>");
> > * * *}
> > }
>
> > But when I load the page I get this in the web console:
>
> > [07:12:13.071] document.getElementById("filterValue") is null
>
> The error in id='filterValue" can have odd effects, depending on what
> comes next in the HTML source. But perhaps more probably, the _real_
> error on the page is yet something else, such as 'filterValue"'.
>
> Moreover, using document.write() is a no-no when you are in an event
> handler. The following is a working approach:

I just put that in as a test. My actual event handler will be doing
something else entirely.

>
> <input type=text id=filterValue size=20>
> <p id=stuff>
> <script>
> window.onload = function() {
> * * *document.getElementById('filterValue').onkeypress = function() {
> * * * * *document.getElementById('stuff').innerHTML = this.value;
> * * *}}
>
> </script>
>
> It's not a bug that when you test this, the characters appear in a
> delayed manner. When you are handling a keypress event, the character
> has not yet been consumed so that it gives its contribution to the input
> element's content.
>
> --
> Yucca,http://www.cs.tut.fi/~jkorpela/

On Mar 8, 9:44*am, Gene Wirchenko <ge...@ocis.net> wrote:
> On Thu, 8 Mar 2012 06:51:08 -0800 (PST), "Larry.Mart...@gmail.com"
>
> <larry.mart...@gmail.com> wrote:
> >Just getting started in javascript. This is my very first script.
>
> * * *Say what?
>
> * * *I have been digging into JavaScript for months and have only
> recently gotten into dealing with that level on character input, and I
> have not gotten into creating functions on the fly.

I just got the JavaScript: The Definitive Guide book yesterday, got up
at 4am today and started perusing the book. I saw an example that did
something like that, so that's what I did.

> >I have a very simple web page with a text entry field:
>
> ><input type="text" id='filterValue" size=20>
>
> * * * * * * * * * * * *^ * * * * * ^
> * * *Mismatched quotes.

Yes, that was the problem.

>
> >In my javascript function I want to get each keystroke from that
> >field, and write it out. So I have:
>
> * * *But you are not doing that. *You are writing out the control
> value and that before the character just entered is added.
>
> >window.onload = function() {
> > * *document.getElementById("filterValue").onkeypress = function(){
> > * * * *var val = document.getElementById("filterValue").value;
> > * * * *document.write("<p>" + val + "</p>");
>
> * * * * *^^^^^^^^^^^^^^
> * * *This wipes out your page.
>
> > * *}
> >}
>
> * * *If you want the character itself, try the following. *Watch the
> line breaks do not mess you up.
>
> ***** Start of Included Code *****
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
>
> <head>
> * <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">
> * <title>2012-03-08: Showing Input</title>
> </head>
>
> <body>
>
> <script type="text/javascript">
>
> window.onload = function() {
> * * document.getElementById("filterValue").onkeypress =
> function(theEvent) {
> // theEvent * * // event: event that fired (assumed to be keyboard
> event)
> * var theKey=theEvent.which;
> * alert(theKey);
> * return true;
> * }
>
> }
>
> </script>
>
> <input type="text" id="filterValue" size=20>
> <input type="text" size=20>
>
> </body>
> </html>
> ***** End of Included Code *****
>
> >But when I load the page I get this in the web console:
>
> >[07:12:13.071] document.getElementById("filterValue") is null
>
> * * *On my system, this was dealt with by correcting the mismatched
> quotes.
>
> >If I display the page source, I see the field with the matching id:
>
> ><input type="text" id='filterValue" size=20>
>
> >Why is it not being found? What am I doing wrong here?
>
> * * *Because your document.write() wiped it out.
>
> Sincerely,
>
> Sincerely,
>
> Gene Wirchenko

"Larry.Martell@gmail.com" <larry.martell@gmail.com> wrote in
news:9a3cb25a-9440-469a-9fc5-5d3cc70ebc7a@p6g2000yqi.googlegroups.com:

> The document.write was just a test to see if my function was being
> called and was working. You totally missed the point of my issue,
> which was that getElementById was returning null.

Perhaps you totally missed the point of his issue, which is that
"document.write", depending on when it is executed, can mess up the entire
document, thus making getElementById return null because the corresponding
element has just been destroyed by the "document.write".

If what he suggested seems to complicated, use named span elements, and
modify their values using "innerHTML".

Alternatively, define a separate text box above your test field, and append
values to it as a sort of message log.

--
http://pages.videotron.ca/duffym/index.htm#

Tom de Neef wrote:

> "Larry.Martell@gmail.com" […]
>> Just getting started in javascript. This is my very first script.
>>
>> I have a very simple web page with a text entry field:
>>
>> <input type="text" id='filterValue" size=20>
>>
>> In my javascript function I want to get each keystroke from that
>> field, and write it out. So I have:
>>
>> window.onload = function() {
>> document.getElementById("filterValue").onkeypress = function() {
>> var val = document.getElementById("filterValue").value;
>> document.write("<p>" + val + "</p>");
>> }
>> }
>
> I am a newby myself, so I may easily be corrected.
> Check out document.write.

Did you mean "remove"? "(To) check out" is colloquial for "(to) look into"
or "(to) retrieve" (with version control systems) instead.

> It will create a new execution context.

No, it will not. A new execution context can only be created with a
function and, in a browser environment, a new view (e.g., tab or window).

> Thus you loose everything you thought you had declared.
^^^^^
([to] _lose_ – lost – lost. "(to) loose" something means to untie something
instead.)

What you probably meant to say is that if document.write() is called after
the document has been loaded, and the output stream has been closed, it
opens a new output stream (as if by document.open(), see W3C DOM Level 2
HTML) and overwrites the existing document tree, which often causes the
previously existing global script execution context to be at least partially
deconstructed by the user agent. (There is no public standard to specify a
proper behavior, and it varies, which is why this should be avoided.)

In this case, the event listener that calls document.write() is being
added/defined after the window has been loaded (thanks to `window.onload'),
which often suggests that the document in the window has been loaded, too.
So the call to document.write() is bound to happen after the document has
been loaded.

The solution is to use other DOM manipulation methods instead. It may be
contained in nor referred to by the FAQ of this newsgroup, which one should
always consult before asking a question here.

> Also check 'this'. Within the onkeypress function you ought to be able to
> refer to the control that handled the event via .this.

Correct.


PointedEars
--
Sometimes, what you learn is wrong. If those wrong ideas are close to the
root of the knowledge tree you build on a particular subject, pruning the
bad branches can sometimes cause the whole tree to collapse.
-- Mike Duffy in cljs, <news:Xns9FB6521286DB8invalidcom@94.75.214.39>

"Thomas 'PointedEars' Lahn" <PointedEars@web.de>
>> I am a newby myself, so I may easily be corrected.
>> Check out document.write.
>
> Did you mean "remove"? "(To) check out" is colloquial for "(to) look
> into"
> or "(to) retrieve" (with version control systems) instead.
>
;-) I must have been at a hotel counter. I meant: see what you can find out
about...

>> It will create a new execution context.
>
> What you probably meant to say
> is that if document.write() is called after
> the document has been loaded, and the output stream has been closed, it
> opens a new output stream (as if by document.open(), see W3C DOM Level 2
> HTML) and overwrites the existing document tree, which often causes the
> previously existing global script execution context to be at least
> partially
> deconstructed by the user agent. (There is no public standard to specify
> a
> proper behavior, and it varies, which is why this should be avoided.)
>
I couldn't have said it better.
Always like your comments.
Tom

In comp.lang.javascript message <5049dd4e-dcc9-4ea4-8ea1-633cb5f8ed0b@i1
6g2000yql.googlegroups.com>, Thu, 8 Mar 2012 09:15:59,
"Larry.Martell@gmail.com" <larry.martell@gmail.com> posted:

>On Mar 8, 8:10*am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
>wrote:
>> Le 08/03/12 15:51, Larry.Mart...@gmail.com a écrit :

>> > <input type="text" id='filterValue" size=20>

>Yes, that was the problem. Thanks. That's what I get for coding at
>4am.

My rule, easy for me to remember, is that quotes are unnecessary around
attributes which contain only alpha-numeric characters; otherwise, they
may be necessary. If quotes are not used when they are not necessary,
they can cause no problems there.

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms and links;
Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.