Paradox: How can an <a> object have a .color ?

J

Jerry Krinock

In the html below, my function changeIt() changes both the text and
the color of an anchor when it is clicked. It works, but it seems
paradoxical and kind of kludgey.

The paradox I see is in the lines marked Note 1 and Note 2. What is
my object1? Is it the anchor, or its font tag? If it's the font tag,
how can it respond to .innerHTML? If it's the anchor, how can it
respond to .color?

The kludge I see is in having to refer to the font by its id. If I
instead pass the 'this' pointer to the function, I can make it change
the text via .innerHTML, but I can't make it change the color.
Obviously the <a> does not have a font, but is there a better way to
do this?

Thanks,

Jerry Krinock

Tested in Safari....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>Test</title>
<script type="text/javascript">
function changeIt (anId) {
var object1 = document.getElementById(anId) ;
object1.color = "red" ; //
Note 1
object1.innerHTML = "New Text" ; // Note 2
}
</script>
</head>
<body>
<a href="#" onClick='changeIt("item1")'><font id=item1>Click Me</
font></a><br>
</body>
</html>
 
G

Garrett Smith

Jerry said:
In the html below, my function changeIt() changes both the text and
the color of an anchor when it is clicked. It works, but it seems
paradoxical and kind of kludgey.

The paradox I see is in the lines marked Note 1 and Note 2. What is
my object1?
Click to expand...

alert([object1.tagName, object1.innerHTML, object1.parentNode]);

[...]
The kludge I see is in having to refer to the font by its id. If I
instead pass the 'this' pointer to the function, I can make it change
the text via .innerHTML, but I can't make it change the color.
Obviously the <a> does not have a font, but is there a better way to
do this?
Click to expand...

The FONT tag can and should be eliminated (it serves no useful purpose).
Access the style property of the link directly, if needed, as needed:

anAnchor.style.color = "red";

or use the anAnchor.className.
 
V

VK

Jerry said:
The kludge I see is in having to refer to the font by its id.  If I
instead pass the 'this' pointer to the function, I can make it change
the text via .innerHTML, but I can't make it change the color.
Obviously the <a> does not have a font, but is there a better way to
do this?

Thanks,

Jerry Krinock

Tested in Safari....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;
charset=utf-8">
    <title>Test</title>
    <script type="text/javascript">
        function changeIt (anId) {
            var object1 = document.getElementById(anId) ;
            object1.color = "red" ;                              //
Note 1
            object1.innerHTML = "New Text" ;             //  Note 2
        }
    </script>
</head>
<body>
    <a href="#" onClick='changeIt("item1")'><font id=item1>Click Me</
font></a><br>
</body>
</html>
Click to expand...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript">
function changeIt (anId) {
var object1 = document.getElementById(anId) ;
object1.color = "red" ;
object1.innerHTML = "New Text" ;
return false;
}
</script>
</head>
<body>
<p>
<a href="#"
onClick="return changeIt('item1')"><font id=item1>Click Me</font></a>
<p>
</body>
</html>

Please note that the text-decoration:underline comes from the parent
element A so is not affected by setting FONT color.
 
T

Thomas 'PointedEars' Lahn

Jerry said:
In the html below, my function changeIt() changes both the text and
the color of an anchor when it is clicked. It works, but it seems
paradoxical
Click to expand...

It isn't.
and kind of kludgey.
Click to expand...

It is.
The paradox I see is in the lines marked Note 1 and Note 2. What is
my object1?
Click to expand...

It is a reference to the DOM object that represents the element with ID
`item1'. RTFM.
Is it the anchor, or its font tag?
Click to expand...

Neither. It is the DOM object that represents that `font' element.
If it's the font tag, how can it respond to .innerHTML?
Click to expand...

Tags cannot have content; elements can if their content model is not
declared EMPTY. The `font' element can have content, because formatting
text content is its purpose and so its content model is not EMPTY; it is
deprecated since almost 10 years in favor of CSS, though.

<http://www.w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html>
If it's the anchor, how can it respond to .color?
Click to expand...

There is the remote possibility that a proprietary attribute value is
triggered by this property; back in the bad old daysâ„¢, before CSS, browser
vendors introduced a number of proprietary format attributes like
`backgroundcolor' for tables. But do not rely on that.
The kludge I see is in having to refer to the font by its id. If I
instead pass the 'this' pointer to the function, I can make it change
the text via .innerHTML, but I can't make it change the color.
Click to expand...

Yes, you can.
Obviously the <a> does not have a font,
Incorrect.

but is there a better way to do this?
Click to expand...

Yes. Garrett showed you one. If your only purpose is to make the link red
when active, though, you would want to use plain CSS:

a:active {
color: red;
}

Or suppose you give the `a' element the ID that the `font' element now has,
you could write

#item1:active {
color: red;
}

(Further plain CSS help is to be requested through
comp.www.infosystems.www.authoring.stylesheets.)

After you have elimited the `font' element and put the anchor into
a block-level element (like DIV), you can declare HTML 4.01 Strict.

(Further plain HTML help is to be requested through
comp.www.infosystems.www.authoring.html.)


PointedEars
 
T

Thomas 'PointedEars' Lahn

VK said:
function changeIt (anId) {
var object1 = document.getElementById(anId) ;
object1.color = "red" ;
object1.innerHTML = "New Text" ;
return false;
}
[...]
<a href="#"
onClick="return changeIt('item1')"><font id=item1>Click Me</font></a>
Click to expand...

OMG. You would.
[...]
Please note that the text-decoration:underline comes from the parent
element A
Click to expand...

Rubbish. Whether the A element is underlined or not is defined by user
preferences.
so is not affected by setting FONT color.
Click to expand...

That, at least, is true. It has nothing to do with the OP's question,
though.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Jerry said:
In the html below, my function changeIt() changes both the text and
the color of an anchor when it is clicked. It works, but it seems
paradoxical
Click to expand...

It isn't.
and kind of kludgey.
Click to expand...

It is.
The paradox I see is in the lines marked Note 1 and Note 2. What is
my object1?
Click to expand...

It is a reference to the DOM object that represents the element with ID
`item1'. RTFM.
Is it the anchor, or its font tag?
Click to expand...

Neither. It is the DOM object that represents that `font' element.
If it's the font tag, how can it respond to .innerHTML?
Click to expand...

Tags cannot have content; elements can if their content model is not
declared EMPTY. The `font' element can have content, because formatting
text content is its purpose and so its content model is not EMPTY; it is
deprecated since almost 10 years in favor of CSS, though.

<http://www.w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html>
If it's the anchor, how can it respond to .color?
Click to expand...

There is the remote possibility that a proprietary attribute value is
triggered by this property; back in the bad old daysâ„¢, before CSS, browser
vendors introduced a number of proprietary format attributes like
`backgroundcolor' for tables. But do not rely on that.
The kludge I see is in having to refer to the font by its id. If I
instead pass the 'this' pointer to the function, I can make it change
the text via .innerHTML, but I can't make it change the color.
Click to expand...

Yes, you can.
Obviously the <a> does not have a font,
Incorrect.

but is there a better way to do this?
Click to expand...

Yes. Garrett showed you one. If your only purpose is to make the link red
when active, though, you would want to use plain CSS:

a:active {
color: red;
}

Or suppose you give the `a' element the ID that the `font' element now has,
you could write

#item1:active {
color: red;
}

(Further plain CSS help is to be requested through
comp.infosystems.www.authoring.stylesheets.)

After you have eliminated the `font' element and put the anchor into
a block-level element (like DIV), you can declare HTML 4.01 Strict.

(Further plain HTML help is to be requested through
comp.infosystems.www.authoring.html.)


PointedEars
 
J

Jerry Krinock

Jerry said:
The paradox I see is in the lines marked Note 1 and Note 2.  What is
my object1?  
Click to expand...

alert([object1.tagName, object1.innerHTML, object1.parentNode]);
Click to expand...

OK, so it's the font tag. And if I pass 'this', instead, it's the
anchor tag.
The FONT tag can and should be eliminated (it serves no useful purpose).
Access the style property of the link directly, if needed, as needed:
Click to expand...

Ah, the 'style' object. I've found a good HTML/DOM reference now.
Code looks much better now...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>Test</title>
<script type="text/javascript">
function changeById (object) {
object.style.color = "red" ;
object.innerHTML = "New Text" ;
}
</script>
</head>
<body>
<a href="#" onClick='changeById(this)'>Click Me</a><br>
</body>
</html>

Thanks to all!
 
V

VK

Jerry Krinock wrote on 12 okt 2009 in comp.lang.javascript:


You might be very objective,
but style is not an object.
Click to expand...

as in <a style=... it is an element attribute

as in elm.style=... it is an object, moreover on Gecko platforms it is
a regular JavaScript object with Object.prototype in the chain

;-)
 
T

Thomas 'PointedEars' Lahn

VK said:
True.

as in <a style=... it is an element attribute
Click to expand...
^^^^^^^^^^^^^^^^^
Let's settle for `attribute' in order not to overcomplicate matters
needlessly.
as in elm.style=... it is an object, moreover on Gecko platforms it is
a regular JavaScript object with Object.prototype in the chain
Click to expand...

No, it is not that object. It is a property that refers to the object that
you describe, whereas, to be exact, "Gecko platforms" would be Gecko-based
(software) applications and "the chain" would be its prototype chain (there
is also a scope chain which is unrelated to it.)

And that object implements the CSSStyleDeclaration interface of W3C DOM
Level 2 CSS, at least in Gecko-based browsers which causes it to have, for
example, a `color' property that represents the value of the `color' CSS
property of the element represented by the object referred to by the
property named `elm'.


PointedEars.
 

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

How can I arrange a series of radio buttons? 2
How to position the *tooltip* comment on these buttons? 9
How to have two html audio players on one page? 0
About as basic "Newbie-Question" that you can get. 3
How can I add arrows to my FAQ 0
How do I hide the modal after 5 seconds? 4
I need help making a zooming function 11
How to save JSON Data to a file using fetch() api? 2

Members online

Total: 38 (members: 3, guests: 35)
Robots: 216

Forum statistics

Threads
473,764
Messages
2,569,566
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top