Function...

1

116

I am attempting to write a value to a cell that is with in a form, rather
than a textbox. What am I missing? I keep receiving an error. T2.value
works, but the 'ByID' is not.

<script type="text/javascript">
function sqrtornd()
{
with (document.forms[0])
{
var con = '1.414'
var sqr = T1.value
var txtans = sqr * con
var answer = txtans

T2.value = txtans;

//document.getElementById("calcans").innerHTML = answer.fontsize(1);

}
}
</script>

David
 
T

Trevor Lawrence

Hi David,

You seem to be where I was a few years ago, trying to find out what you can
do with JavaScript, so your questions are (in some cases) pushing me to
(re)learn myself

Anyway, keep having fun

Here is what works for me. It writes the value to an input text box in the
same form.

<html>
<head>
<script type="text/javascript">
function sqrtornd()
{
var con = Math.sqrt(2);
with (document.forms[0]) {
T2.value = T1.value * con ;
}
}
</script>
</head>
<body>
<form name="form1" action="">
Enter Input Value: <input type="text" id="T1" value="100"
size="40" /><br>
Result [Value*sqrt(2)]: <input type="text" id="T2" value="" size="40">
<br>
<input type="button" id="Calculate" value="Calculate"
onclick="sqrtornd()">
</form>
</body>
</html>

You could round the result,
e.g. to 3 decimal places, use:
T2.value = Math.round(T1.value * con * 1000) / 1000 ;

You wrote that you don't want it in a textbox, but in "a cell within a
form".
After thinking about this, maybe you are trying to write to the innerHTML of
a <input> element.
You cain't because there ain't one; innerHTML only exists for elements which
have an opening and a closing tag,
You can use therefore use <textarea> instead of <input> and then use
innerHTML in the function

Result [Value*sqrt(2)]: <textarea rows="1" cols="10" id="T2" style="font:
Arial;color:red;"></textarea>

The style can be as you wish, e,g, colours, font sizes, etc.
 
J

Jon Spivey

Learning javascript is fine but look at this
<quote>
var answer = txtans
T2.value = txtans;
//document.getElementById("calcans").innerHTML = answer.fontsize(1);
</quote>

There's no way answer could have a fontsize method if it's just been
declared as a variable

Do you think he might be taking the p*ss :)




Trevor Lawrence said:
Hi David,

You seem to be where I was a few years ago, trying to find out what you
can do with JavaScript, so your questions are (in some cases) pushing me
to (re)learn myself

Anyway, keep having fun

Here is what works for me. It writes the value to an input text box in the
same form.

<html>
<head>
<script type="text/javascript">
function sqrtornd()
{
var con = Math.sqrt(2);
with (document.forms[0]) {
T2.value = T1.value * con ;
}
}
</script>
</head>
<body>
<form name="form1" action="">
Enter Input Value: <input type="text" id="T1" value="100"
size="40" /><br>
Result [Value*sqrt(2)]: <input type="text" id="T2" value="" size="40">
<br>
<input type="button" id="Calculate" value="Calculate"
onclick="sqrtornd()">
</form>
</body>
</html>

You could round the result,
e.g. to 3 decimal places, use:
T2.value = Math.round(T1.value * con * 1000) / 1000 ;

You wrote that you don't want it in a textbox, but in "a cell within a
form".
After thinking about this, maybe you are trying to write to the innerHTML
of a <input> element.
You cain't because there ain't one; innerHTML only exists for elements
which have an opening and a closing tag,
You can use therefore use <textarea> instead of <input> and then use
innerHTML in the function

Result [Value*sqrt(2)]: <textarea rows="1" cols="10" id="T2" style="font:
Arial;color:red;"></textarea>

The style can be as you wish, e,g, colours, font sizes, etc.

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

116 said:
I am attempting to write a value to a cell that is with in a form, rather
than a textbox. What am I missing? I keep receiving an error. T2.value
works, but the 'ByID' is not.

<script type="text/javascript">
function sqrtornd()
{
with (document.forms[0])
{
var con = '1.414'
var sqr = T1.value
var txtans = sqr * con
var answer = txtans

T2.value = txtans;

//document.getElementById("calcans").innerHTML = answer.fontsize(1);

}
}
</script>

David
Click to expand...
Click to expand...
 
T

Trevor Lawrence

Jon,

I don't think he is. I think he's just confused. Maybe he's picked up some
stuff along the way and thought it might work.

The meaning of properties and methods may be one thing worth learning.
(David, here is a reference that might help:
http://www.w3schools.com/htmldom/dom_methods.asp .
This does not specify how to define your own properties and methods, but
doing this is probably not for beginners.)

I think that what would work here to specify a font size (if that is what is
required) is
1. Using style=".........."
or
2. Defining a class in CSS and using class=

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
Learning javascript is fine but look at this
<quote>
var answer = txtans
T2.value = txtans;
//document.getElementById("calcans").innerHTML = answer.fontsize(1);
</quote>

There's no way answer could have a fontsize method if it's just been
declared as a variable

Do you think he might be taking the p*ss :)




Trevor Lawrence said:
Hi David,

You seem to be where I was a few years ago, trying to find out what you
can do with JavaScript, so your questions are (in some cases) pushing me
to (re)learn myself

Anyway, keep having fun

Here is what works for me. It writes the value to an input text box in
the same form.

<html>
<head>
<script type="text/javascript">
function sqrtornd()
{
var con = Math.sqrt(2);
with (document.forms[0]) {
T2.value = T1.value * con ;
}
}
</script>
</head>
<body>
<form name="form1" action="">
Enter Input Value: <input type="text" id="T1" value="100"
size="40" /><br>
Result [Value*sqrt(2)]: <input type="text" id="T2" value="" size="40">
<br>
<input type="button" id="Calculate" value="Calculate"
onclick="sqrtornd()">
</form>
</body>
</html>

You could round the result,
e.g. to 3 decimal places, use:
T2.value = Math.round(T1.value * con * 1000) / 1000 ;

You wrote that you don't want it in a textbox, but in "a cell within a
form".
After thinking about this, maybe you are trying to write to the innerHTML
of a <input> element.
You cain't because there ain't one; innerHTML only exists for elements
which have an opening and a closing tag,
You can use therefore use <textarea> instead of <input> and then use
innerHTML in the function

Result [Value*sqrt(2)]: <textarea rows="1" cols="10" id="T2" style="font:
Arial;color:red;"></textarea>

The style can be as you wish, e,g, colours, font sizes, etc.

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

116 said:
I am attempting to write a value to a cell that is with in a form, rather
than a textbox. What am I missing? I keep receiving an error.
T2.value
works, but the 'ByID' is not.

<script type="text/javascript">
function sqrtornd()
{
with (document.forms[0])
{
var con = '1.414'
var sqr = T1.value
var txtans = sqr * con
var answer = txtans

T2.value = txtans;

//document.getElementById("calcans").innerHTML = answer.fontsize(1);

}
}
</script>

David
Click to expand...
Click to expand...
Click to expand...
 
1

116

Ok...? p*ss. Testing no. Just trying to improve our intranet. lots of
data entry, and never a means to edit, etc. Been messing with SQL, and now
java to improve the function of pages for more uniform entries and
maintenance.

I do however appriciate all of the assistance.

David

Trevor Lawrence said:
Jon,

I don't think he is. I think he's just confused. Maybe he's picked up some
stuff along the way and thought it might work.

The meaning of properties and methods may be one thing worth learning.
(David, here is a reference that might help:
http://www.w3schools.com/htmldom/dom_methods.asp .
This does not specify how to define your own properties and methods, but
doing this is probably not for beginners.)

I think that what would work here to specify a font size (if that is what is
required) is
1. Using style=".........."
or
2. Defining a class in CSS and using class=

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
Learning javascript is fine but look at this
<quote>
var answer = txtans
T2.value = txtans;
//document.getElementById("calcans").innerHTML = answer.fontsize(1);
</quote>

There's no way answer could have a fontsize method if it's just been
declared as a variable

Do you think he might be taking the p*ss :)




Trevor Lawrence said:
Hi David,

You seem to be where I was a few years ago, trying to find out what you
can do with JavaScript, so your questions are (in some cases) pushing me
to (re)learn myself

Anyway, keep having fun

Here is what works for me. It writes the value to an input text box in
the same form.

<html>
<head>
<script type="text/javascript">
function sqrtornd()
{
var con = Math.sqrt(2);
with (document.forms[0]) {
T2.value = T1.value * con ;
}
}
</script>
</head>
<body>
<form name="form1" action="">
Enter Input Value: <input type="text" id="T1" value="100"
size="40" /><br>
Result [Value*sqrt(2)]: <input type="text" id="T2" value="" size="40">
<br>
<input type="button" id="Calculate" value="Calculate"
onclick="sqrtornd()">
</form>
</body>
</html>

You could round the result,
e.g. to 3 decimal places, use:
T2.value = Math.round(T1.value * con * 1000) / 1000 ;

You wrote that you don't want it in a textbox, but in "a cell within a
form".
After thinking about this, maybe you are trying to write to the innerHTML
of a <input> element.
You cain't because there ain't one; innerHTML only exists for elements
which have an opening and a closing tag,
You can use therefore use <textarea> instead of <input> and then use
innerHTML in the function

Result [Value*sqrt(2)]: <textarea rows="1" cols="10" id="T2" style="font:
Arial;color:red;"></textarea>

The style can be as you wish, e,g, colours, font sizes, etc.

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

I am attempting to write a value to a cell that is with in a form, rather
than a textbox. What am I missing? I keep receiving an error.
T2.value
works, but the 'ByID' is not.

<script type="text/javascript">
function sqrtornd()
{
with (document.forms[0])
{
var con = '1.414'
var sqr = T1.value
var txtans = sqr * con
var answer = txtans

T2.value = txtans;

//document.getElementById("calcans").innerHTML = answer.fontsize(1);

}
}
</script>

David
Click to expand...
Click to expand...


.
Click to expand...
 
H

Hot-text

I believe you doing a good job with the help of Mr. Trevor !
so you like that JavaScript editor?

So you like to do JAVA have any good Books?

http://www.hot-text.ath.cx/pub/Java/ <<< applet examples



116 said:
Ok...? p*ss. Testing no. Just trying to improve our intranet. lots of
data entry, and never a means to edit, etc. Been messing with SQL, and
now
java to improve the function of pages for more uniform entries and
maintenance.

I do however appriciate all of the assistance.

David

Trevor Lawrence said:
Jon,

I don't think he is. I think he's just confused. Maybe he's picked up
some
stuff along the way and thought it might work.

The meaning of properties and methods may be one thing worth learning.
(David, here is a reference that might help:
http://www.w3schools.com/htmldom/dom_methods.asp .
This does not specify how to define your own properties and methods, but
doing this is probably not for beginners.)

I think that what would work here to specify a font size (if that is what
is
required) is
1. Using style=".........."
or
2. Defining a class in CSS and using class=

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
Learning javascript is fine but look at this
<quote>
var answer = txtans
T2.value = txtans;
//document.getElementById("calcans").innerHTML = answer.fontsize(1);
</quote>

There's no way answer could have a fontsize method if it's just been
declared as a variable

Do you think he might be taking the p*ss :)




Hi David,

You seem to be where I was a few years ago, trying to find out what
you
can do with JavaScript, so your questions are (in some cases) pushing
me
to (re)learn myself

Anyway, keep having fun

Here is what works for me. It writes the value to an input text box in
the same form.

<html>
<head>
<script type="text/javascript">
function sqrtornd()
{
var con = Math.sqrt(2);
with (document.forms[0]) {
T2.value = T1.value * con ;
}
}
</script>
</head>
<body>
<form name="form1" action="">
Enter Input Value: <input type="text" id="T1" value="100"
size="40" /><br>
Result [Value*sqrt(2)]: <input type="text" id="T2" value=""
size="40">
<br>
<input type="button" id="Calculate" value="Calculate"
onclick="sqrtornd()">
</form>
</body>
</html>

You could round the result,
e.g. to 3 decimal places, use:
T2.value = Math.round(T1.value * con * 1000) / 1000 ;

You wrote that you don't want it in a textbox, but in "a cell within a
form".
After thinking about this, maybe you are trying to write to the
innerHTML
of a <input> element.
You cain't because there ain't one; innerHTML only exists for elements
which have an opening and a closing tag,
You can use therefore use <textarea> instead of <input> and then use
innerHTML in the function

Result [Value*sqrt(2)]: <textarea rows="1" cols="10" id="T2"
style="font:
Arial;color:red;"></textarea>

The style can be as you wish, e,g, colours, font sizes, etc.

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

I am attempting to write a value to a cell that is with in a form,
rather
than a textbox. What am I missing? I keep receiving an error.
T2.value
works, but the 'ByID' is not.

<script type="text/javascript">
function sqrtornd()
{
with (document.forms[0])
{
var con = '1.414'
var sqr = T1.value
var txtans = sqr * con
var answer = txtans

T2.value = txtans;

//document.getElementById("calcans").innerHTML =
answer.fontsize(1);

}
}
</script>

David
Click to expand...


.
Click to expand...
Click to expand...
 
T

Trevor Lawrence

Mr Hot-text

I wouldn't suggest that people try JAVA. I don't think that 116 (AKA David)
is using JAVA either.

I have been sending him some JavaScript and Jon Spivey was also commenting
about JavaScript. This is probably the better way to go these days.

For debugging of JavaScript, IE8 will report errors (better than IE7 used
to) as will Firefox and Firebug.

Another place to test JavaScript is http://www.jslint.com/ although this
page states:
Warning: JSLint will hurt your feelings
 
J

Jon Spivey

I was just kidding with my comment :)

The key to javascript is it's very easy but you do need to put in maybe an
hours up front work to figure it out. All you need basically is
1/ a basic understanding of what javascript does, properties/methods etc
2/ how to do if/else and for/next
3/ how to use the DOM (document object model) - and a place to look it up as
needed (unless you have an amazing memory :)
4/ how to attach an event

That's it. Once you've got those 4 you'll be able to start writing
javascript as fast as you can type. The up front work will save hours in the
future. Realistically by the time you've asked 3 questions (or Googled for 3
scripts) and tried to implement them you've already spent more time than it
would take to learn js in the 1st place :)

Cheers,
Jon


116 said:
Ok...? p*ss. Testing no. Just trying to improve our intranet. lots of
data entry, and never a means to edit, etc. Been messing with SQL, and
now
java to improve the function of pages for more uniform entries and
maintenance.

I do however appriciate all of the assistance.

David

Trevor Lawrence said:
Jon,

I don't think he is. I think he's just confused. Maybe he's picked up
some
stuff along the way and thought it might work.

The meaning of properties and methods may be one thing worth learning.
(David, here is a reference that might help:
http://www.w3schools.com/htmldom/dom_methods.asp .
This does not specify how to define your own properties and methods, but
doing this is probably not for beginners.)

I think that what would work here to specify a font size (if that is what
is
required) is
1. Using style=".........."
or
2. Defining a class in CSS and using class=

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
Learning javascript is fine but look at this
<quote>
var answer = txtans
T2.value = txtans;
//document.getElementById("calcans").innerHTML = answer.fontsize(1);
</quote>

There's no way answer could have a fontsize method if it's just been
declared as a variable

Do you think he might be taking the p*ss :)




Hi David,

You seem to be where I was a few years ago, trying to find out what
you
can do with JavaScript, so your questions are (in some cases) pushing
me
to (re)learn myself

Anyway, keep having fun

Here is what works for me. It writes the value to an input text box in
the same form.

<html>
<head>
<script type="text/javascript">
function sqrtornd()
{
var con = Math.sqrt(2);
with (document.forms[0]) {
T2.value = T1.value * con ;
}
}
</script>
</head>
<body>
<form name="form1" action="">
Enter Input Value: <input type="text" id="T1" value="100"
size="40" /><br>
Result [Value*sqrt(2)]: <input type="text" id="T2" value=""
size="40">
<br>
<input type="button" id="Calculate" value="Calculate"
onclick="sqrtornd()">
</form>
</body>
</html>

You could round the result,
e.g. to 3 decimal places, use:
T2.value = Math.round(T1.value * con * 1000) / 1000 ;

You wrote that you don't want it in a textbox, but in "a cell within a
form".
After thinking about this, maybe you are trying to write to the
innerHTML
of a <input> element.
You cain't because there ain't one; innerHTML only exists for elements
which have an opening and a closing tag,
You can use therefore use <textarea> instead of <input> and then use
innerHTML in the function

Result [Value*sqrt(2)]: <textarea rows="1" cols="10" id="T2"
style="font:
Arial;color:red;"></textarea>

The style can be as you wish, e,g, colours, font sizes, etc.

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

I am attempting to write a value to a cell that is with in a form,
rather
than a textbox. What am I missing? I keep receiving an error.
T2.value
works, but the 'ByID' is not.

<script type="text/javascript">
function sqrtornd()
{
with (document.forms[0])
{
var con = '1.414'
var sqr = T1.value
var txtans = sqr * con
var answer = txtans

T2.value = txtans;

//document.getElementById("calcans").innerHTML =
answer.fontsize(1);

}
}
</script>

David
Click to expand...


.
Click to expand...
Click to expand...
 
T

Trevor Lawrence

Jon,

This key to JavaScript looks good. I have never bothered too much with
attaching events, although I have used (and tried to understand) JavaScript
that does this.

One thing that it would be good to clarify (at least for me) is when can one
use "this".

For example you suggested this code
1. <input type="button" id="b" value="press" onclick="this.value = 'you
pressed
me';" />
or
2. <input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function(){this.value = 'you pressed
me';};
</script>

My query is
How do one know when "this" is defined?
and
How do you know to which element "this" refers ?

In Case 1, "this" is the element on which its present (<input>), but in Case
2, how do you know that is refers to.document.getElementById("b")? Is it
because it was the last element referred to ?

If I change the JavaScript function to
document.getElementById("b").onclick = function(){alert(this);this.value =
'you pressed me';};
all the alert returns is [Object] - it does not say id="b", which would be
more helpful/

BTW,
Re 3/
For the information of others, here is a DOM tutorial
http://www.w3schools.com/HTMLDOM/default.asp

and here is a DOM reference
http://www.w3schools.com/jsref/default.asp

There may well be other good ones
--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
I was just kidding with my comment :)

The key to javascript is it's very easy but you do need to put in maybe an
hours up front work to figure it out. All you need basically is
1/ a basic understanding of what javascript does, properties/methods etc
2/ how to do if/else and for/next
3/ how to use the DOM (document object model) - and a place to look it up
as needed (unless you have an amazing memory :)
4/ how to attach an event

That's it. Once you've got those 4 you'll be able to start writing
javascript as fast as you can type. The up front work will save hours in
the future. Realistically by the time you've asked 3 questions (or Googled
for 3 scripts) and tried to implement them you've already spent more time
than it would take to learn js in the 1st place :)

Cheers,
Jon


116 said:
Ok...? p*ss. Testing no. Just trying to improve our intranet. lots of
data entry, and never a means to edit, etc. Been messing with SQL, and
now
java to improve the function of pages for more uniform entries and
maintenance.

I do however appriciate all of the assistance.

David

Trevor Lawrence said:
Jon,

I don't think he is. I think he's just confused. Maybe he's picked up
some
stuff along the way and thought it might work.

The meaning of properties and methods may be one thing worth learning.
(David, here is a reference that might help:
http://www.w3schools.com/htmldom/dom_methods.asp .
This does not specify how to define your own properties and methods, but
doing this is probably not for beginners.)

I think that what would work here to specify a font size (if that is
what is
required) is
1. Using style=".........."
or
2. Defining a class in CSS and using class=

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Learning javascript is fine but look at this
<quote>
var answer = txtans
T2.value = txtans;
//document.getElementById("calcans").innerHTML = answer.fontsize(1);
</quote>

There's no way answer could have a fontsize method if it's just been
declared as a variable

Do you think he might be taking the p*ss :)




Hi David,

You seem to be where I was a few years ago, trying to find out what
you
can do with JavaScript, so your questions are (in some cases) pushing
me
to (re)learn myself

Anyway, keep having fun

Here is what works for me. It writes the value to an input text box
in
the same form.

<html>
<head>
<script type="text/javascript">
function sqrtornd()
{
var con = Math.sqrt(2);
with (document.forms[0]) {
T2.value = T1.value * con ;
}
}
</script>
</head>
<body>
<form name="form1" action="">
Enter Input Value: <input type="text" id="T1" value="100"
size="40" /><br>
Result [Value*sqrt(2)]: <input type="text" id="T2" value=""
size="40">
<br>
<input type="button" id="Calculate" value="Calculate"
onclick="sqrtornd()">
</form>
</body>
</html>

You could round the result,
e.g. to 3 decimal places, use:
T2.value = Math.round(T1.value * con * 1000) / 1000 ;

You wrote that you don't want it in a textbox, but in "a cell within
a
form".
After thinking about this, maybe you are trying to write to the
innerHTML
of a <input> element.
You cain't because there ain't one; innerHTML only exists for
elements
which have an opening and a closing tag,
You can use therefore use <textarea> instead of <input> and then use
innerHTML in the function

Result [Value*sqrt(2)]: <textarea rows="1" cols="10" id="T2"
style="font:
Arial;color:red;"></textarea>

The style can be as you wish, e,g, colours, font sizes, etc.

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

I am attempting to write a value to a cell that is with in a form,
rather
than a textbox. What am I missing? I keep receiving an error.
T2.value
works, but the 'ByID' is not.

<script type="text/javascript">
function sqrtornd()
{
with (document.forms[0])
{
var con = '1.414'
var sqr = T1.value
var txtans = sqr * con
var answer = txtans

T2.value = txtans;

//document.getElementById("calcans").innerHTML =
answer.fontsize(1);

}
}
</script>

David






.
Click to expand...
Click to expand...
Click to expand...
 
J

Jon Spivey

If I change the JavaScript function to
document.getElementById("b").onclick = function(){alert(this);this.value =
'you pressed me';};
all the alert returns is [Object] - it does not say id="b", which would be
more helpful/
Click to expand...

This refers to the button which is an object - this will always refer to an
object wherever it's used. Once we have a reference to an object we can
access it's properties and methods. for example

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { alert(this.id);
this.setAttribute('id', 'NewId'); alert(this.id); }
</script>

Or we could pass "this" - ie the button itself - to a function and access
it's properties methods there

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { doButton(this); }

function doButton(){
// arguments is always an array of the arguments passed to the function -
only 1 in this case so the button is arguments[0]
arguments[0].value='you pressed me';
}
</script>

Basically different ways to skin the same cat.

Cheers,
Jon
http://MyMobileDeal.com
 
T

Trevor Lawrence

Thanks, Jon.

I can understand what you wrote. That is, that "this" always refers to an
object.

But there will be many objects in HTML.
Which one is "this" ?
Is it the last mentioned object (as I suggested before)?

I experimented with this code
<input type="button" id="a" value="press a" />
<input type="button" id="b" value="press b" />
<script type="text/javascript">
document.getElementById("a").onclick = function() { alert('id of "press a":
' + this.id); }
document.getElementById("b").onclick = function() { alert('id of "press b":
' + this.id);
document.getElementById("a").setAttribute('id',
'NewId');
alert('this.id: ' +
this.id);
}
</script>

When first entered,
"press a" gives the alert: id of "press a": a
"press b" gives the alert: id of "press b": b
and the alert: this.id: b

This seems to tell me that the reference "this" has not changed. It is still
the button with id="b"

When executed a second time (without reloading the page)
"press a" gives the alert: id of "press a": NewId
"press b" gives the alert: id of "press b": b
and an error
Message: 'document.getElementById(...)' is null or not an object
Line: 22
Char: 53
Code: 0

Line 22 is
document.getElementById("a").setAttribute('id', 'NewId');
I guess Char 53 is the 'd' of 'document...............'

This tells me that the id of "a" was altered, but why does the code now fail
at the same point? (Clearly I don't understand as much as I thought. <g>)
--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
If I change the JavaScript function to
document.getElementById("b").onclick = function(){alert(this);this.value
= 'you pressed me';};
all the alert returns is [Object] - it does not say id="b", which would
be more helpful/
Click to expand...

This refers to the button which is an object - this will always refer to
an object wherever it's used. Once we have a reference to an object we can
access it's properties and methods. for example

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { alert(this.id);
this.setAttribute('id', 'NewId'); alert(this.id); }
</script>

Or we could pass "this" - ie the button itself - to a function and access
it's properties methods there

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { doButton(this); }

function doButton(){
// arguments is always an array of the arguments passed to the function -
only 1 in this case so the button is arguments[0]
arguments[0].value='you pressed me';
}
</script>

Basically different ways to skin the same cat.

Cheers,
Jon
http://MyMobileDeal.com
Click to expand...
 
S

Stefan B Rusynko

The error after 1st click is because there is no longer an object named "a" in the document after the 1st click
- your script changes it's id from "a" to "NewId"
- so the script fails when it calls for "a"

And "this" refers to the object called in the last get getElementById in your script
--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


Thanks, Jon.

I can understand what you wrote. That is, that "this" always refers to an
object.

But there will be many objects in HTML.
Which one is "this" ?
Is it the last mentioned object (as I suggested before)?

I experimented with this code
<input type="button" id="a" value="press a" />
<input type="button" id="b" value="press b" />
<script type="text/javascript">
document.getElementById("a").onclick = function() { alert('id of "press a":
' + this.id); }
document.getElementById("b").onclick = function() { alert('id of "press b":
' + this.id);
document.getElementById("a").setAttribute('id',
'NewId');
alert('this.id: ' +
this.id);
}
</script>

When first entered,
"press a" gives the alert: id of "press a": a
"press b" gives the alert: id of "press b": b
and the alert: this.id: b

This seems to tell me that the reference "this" has not changed. It is still
the button with id="b"

When executed a second time (without reloading the page)
"press a" gives the alert: id of "press a": NewId
"press b" gives the alert: id of "press b": b
and an error
Message: 'document.getElementById(...)' is null or not an object
Line: 22
Char: 53
Code: 0

Line 22 is
document.getElementById("a").setAttribute('id', 'NewId');
I guess Char 53 is the 'd' of 'document...............'

This tells me that the id of "a" was altered, but why does the code now fail
at the same point? (Clearly I don't understand as much as I thought. <g>)
--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
If I change the JavaScript function to
document.getElementById("b").onclick = function(){alert(this);this.value
= 'you pressed me';};
all the alert returns is [Object] - it does not say id="b", which would
be more helpful/
Click to expand...

This refers to the button which is an object - this will always refer to
an object wherever it's used. Once we have a reference to an object we can
access it's properties and methods. for example

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { alert(this.id);
this.setAttribute('id', 'NewId'); alert(this.id); }
</script>

Or we could pass "this" - ie the button itself - to a function and access
it's properties methods there

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { doButton(this); }

function doButton(){
// arguments is always an array of the arguments passed to the function -
only 1 in this case so the button is arguments[0]
arguments[0].value='you pressed me';
}
</script>

Basically different ways to skin the same cat.

Cheers,
Jon
http://MyMobileDeal.com
Click to expand...
 
T

Trevor Lawrence

Stefan,
Isn't that so obvious ??
That is, what an idiot I am !

So does "this " always refer to the last getElementById ?

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Stefan B Rusynko said:
The error after 1st click is because there is no longer an object named
"a" in the document after the 1st click
- your script changes it's id from "a" to "NewId"
- so the script fails when it calls for "a"

And "this" refers to the object called in the last get getElementById in
your script
--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


Thanks, Jon.

I can understand what you wrote. That is, that "this" always refers to an
object.

But there will be many objects in HTML.
Which one is "this" ?
Is it the last mentioned object (as I suggested before)?

I experimented with this code
<input type="button" id="a" value="press a" />
<input type="button" id="b" value="press b" />
<script type="text/javascript">
document.getElementById("a").onclick = function() { alert('id of "press
a":
' + this.id); }
document.getElementById("b").onclick = function() { alert('id of "press
b":
' + this.id);

document.getElementById("a").setAttribute('id',
'NewId');
alert('this.id: ' +
this.id);
}
</script>

When first entered,
"press a" gives the alert: id of "press a": a
"press b" gives the alert: id of "press b": b
and the alert: this.id: b

This seems to tell me that the reference "this" has not changed. It is
still
the button with id="b"

When executed a second time (without reloading the page)
"press a" gives the alert: id of "press a": NewId
"press b" gives the alert: id of "press b": b
and an error
Message: 'document.getElementById(...)' is null or not an object
Line: 22
Char: 53
Code: 0

Line 22 is
document.getElementById("a").setAttribute('id', 'NewId');
I guess Char 53 is the 'd' of 'document...............'

This tells me that the id of "a" was altered, but why does the code now
fail
at the same point? (Clearly I don't understand as much as I thought. <g>)
--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
If I change the JavaScript function to
document.getElementById("b").onclick = function(){alert(this);this.value
= 'you pressed me';};
all the alert returns is [Object] - it does not say id="b", which would
be more helpful/
Click to expand...

This refers to the button which is an object - this will always refer to
an object wherever it's used. Once we have a reference to an object we
can
access it's properties and methods. for example

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { alert(this.id);
this.setAttribute('id', 'NewId'); alert(this.id); }
</script>

Or we could pass "this" - ie the button itself - to a function and access
it's properties methods there

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { doButton(this); }

function doButton(){
// arguments is always an array of the arguments passed to the function -
only 1 in this case so the button is arguments[0]
arguments[0].value='you pressed me';
}
</script>

Basically different ways to skin the same cat.

Cheers,
Jon
http://MyMobileDeal.com
Click to expand...
Click to expand...
 
S

Stefan B Rusynko

No
"this" refers to instance at hand of any current object
- as in:

function newlastname(new_lastname)
{ this.lastname=new_lastname; }
--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


Stefan,
Isn't that so obvious ??
That is, what an idiot I am !

So does "this " always refer to the last getElementById ?

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Stefan B Rusynko said:
The error after 1st click is because there is no longer an object named
"a" in the document after the 1st click
- your script changes it's id from "a" to "NewId"
- so the script fails when it calls for "a"

And "this" refers to the object called in the last get getElementById in
your script
--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


Thanks, Jon.

I can understand what you wrote. That is, that "this" always refers to an
object.

But there will be many objects in HTML.
Which one is "this" ?
Is it the last mentioned object (as I suggested before)?

I experimented with this code
<input type="button" id="a" value="press a" />
<input type="button" id="b" value="press b" />
<script type="text/javascript">
document.getElementById("a").onclick = function() { alert('id of "press
a":
' + this.id); }
document.getElementById("b").onclick = function() { alert('id of "press
b":
' + this.id);

document.getElementById("a").setAttribute('id',
'NewId');
alert('this.id: ' +
this.id);
}
</script>

When first entered,
"press a" gives the alert: id of "press a": a
"press b" gives the alert: id of "press b": b
and the alert: this.id: b

This seems to tell me that the reference "this" has not changed. It is
still
the button with id="b"

When executed a second time (without reloading the page)
"press a" gives the alert: id of "press a": NewId
"press b" gives the alert: id of "press b": b
and an error
Message: 'document.getElementById(...)' is null or not an object
Line: 22
Char: 53
Code: 0

Line 22 is
document.getElementById("a").setAttribute('id', 'NewId');
I guess Char 53 is the 'd' of 'document...............'

This tells me that the id of "a" was altered, but why does the code now
fail
at the same point? (Clearly I don't understand as much as I thought. <g>)
--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
If I change the JavaScript function to
document.getElementById("b").onclick = function(){alert(this);this.value
= 'you pressed me';};
all the alert returns is [Object] - it does not say id="b", which would
be more helpful/
Click to expand...

This refers to the button which is an object - this will always refer to
an object wherever it's used. Once we have a reference to an object we
can
access it's properties and methods. for example

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { alert(this.id);
this.setAttribute('id', 'NewId'); alert(this.id); }
</script>

Or we could pass "this" - ie the button itself - to a function and access
it's properties methods there

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { doButton(this); }

function doButton(){
// arguments is always an array of the arguments passed to the function -
only 1 in this case so the button is arguments[0]
arguments[0].value='you pressed me';
}
</script>

Basically different ways to skin the same cat.

Cheers,
Jon
http://MyMobileDeal.com
Click to expand...
Click to expand...
 
J

Jon Spivey

This is nothing to do with getElementById. It refers to the thing you're
looking at. For example
<a href="page.htm" onclick="alert(this.href);">click</a>

It's clear that this refers to the link. However if you had

<a href="page1.htm">click</a> <a href="page2.htm">click</a>
<script type="text/javascript">
var a=document.getElementsByTagName("a");
for(var b=0;b<a.length;b++)a.onclick=function(){alert(this.href);}
</script>

What would this refer to if I clicked the 2nd link? Just for the heck of it
how about

<div><a href="page1.htm">click</a>
<a href="page2.htm">click</a></div>
<script type="text/javascript">
var a=document.getElementsByTagName("a");
for (var b = 0; b < a.length; b++) a.onclick = function() {
alert(this.parentNode.firstChild.href);}
</script>

What would the alert give when you click the 2nd link? Often times the idea
is to use this to quickly get a handle on 1 element - that done you can move
to other elements on the page.
In that usage this is just a time saver, you could accomplish the same thing
using getElementById but obviously with more code. The other way to use this
is to create your own objects,

function dog() {
this.colour = arguments[0];
this.breed = arguments[1];
}
var x = new dog('black', 'collie'), y = new dog('white','labrador');
alert(x.colour);
alert(y.breed);

This is actually much easier to understand than it is to explain :)

Cheers,
Jon
http://MyMobileDeal.com





Trevor Lawrence said:
Stefan,
Isn't that so obvious ??
That is, what an idiot I am !

So does "this " always refer to the last getElementById ?

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Stefan B Rusynko said:
The error after 1st click is because there is no longer an object named
"a" in the document after the 1st click
- your script changes it's id from "a" to "NewId"
- so the script fails when it calls for "a"

And "this" refers to the object called in the last get getElementById in
your script
--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


Thanks, Jon.

I can understand what you wrote. That is, that "this" always refers to an
object.

But there will be many objects in HTML.
Which one is "this" ?
Is it the last mentioned object (as I suggested before)?

I experimented with this code
<input type="button" id="a" value="press a" />
<input type="button" id="b" value="press b" />
<script type="text/javascript">
document.getElementById("a").onclick = function() { alert('id of "press
a":
' + this.id); }
document.getElementById("b").onclick = function() { alert('id of "press
b":
' + this.id);

document.getElementById("a").setAttribute('id',
'NewId');
alert('this.id: ' +
this.id);
}
</script>

When first entered,
"press a" gives the alert: id of "press a": a
"press b" gives the alert: id of "press b": b
and the alert: this.id: b

This seems to tell me that the reference "this" has not changed. It is
still
the button with id="b"

When executed a second time (without reloading the page)
"press a" gives the alert: id of "press a": NewId
"press b" gives the alert: id of "press b": b
and an error
Message: 'document.getElementById(...)' is null or not an object
Line: 22
Char: 53
Code: 0

Line 22 is
document.getElementById("a").setAttribute('id', 'NewId');
I guess Char 53 is the 'd' of 'document...............'

This tells me that the id of "a" was altered, but why does the code now
fail
at the same point? (Clearly I don't understand as much as I thought. <g>)
--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Jon Spivey said:
If I change the JavaScript function to
document.getElementById("b").onclick =
function(){alert(this);this.value
= 'you pressed me';};
all the alert returns is [Object] - it does not say id="b", which would
be more helpful/


This refers to the button which is an object - this will always refer to
an object wherever it's used. Once we have a reference to an object we
can
access it's properties and methods. for example

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { alert(this.id);
this.setAttribute('id', 'NewId'); alert(this.id); }
</script>

Or we could pass "this" - ie the button itself - to a function and
access
it's properties methods there

<input type="button" id="b" value="press" />
<script type="text/javascript">
document.getElementById("b").onclick = function() { doButton(this); }

function doButton(){
// arguments is always an array of the arguments passed to the
function -
only 1 in this case so the button is arguments[0]
arguments[0].value='you pressed me';
}
</script>

Basically different ways to skin the same cat.

Cheers,
Jon
http://MyMobileDeal.com
Click to expand...
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Script Question... 4
Dropdown events... 2
textbox Disable on value.... 2
Entity name must immediately follow the '&' in the entity referenc 0
Script... 6
DRW Submit Button... 5
Checkbox Question... 2
Help needed with Javascript function 1

Top