getElementById help

[dlolsen]

I still not advanced at javascript and I am trying to do a picture portfolio
page where there is a scrollable area with thumbnails. When you click on the
thumbnail, I want to use document.getEle mentIDBy to change which picture is
displayed in the fullsize area. Everything seems right, but I keep getting
an error:

*Line: 3 | Error: Expected ';' *

I am kinda boggled because I clearly closed with * ; * If anyone could help,
or if there is a better way to do it, please let me know.

Here is the code that applies:

HTML: <div id="picdisplay" ><table align="center" width="100%"
height="100%">< tr><td id="fullpicture " align="center"
valign="middle" ></td></tr></table></div>

JAVASCRIPT: function one1() {
document.getEle mentById("fullp icture").innerH TML="<img
src="images/portfolio/photo1.jpg" border="0" alt="One">";
}

actual page: http://members.shaw.ca/sceniclandscapes/portfolio.htm

In advance, Thanks a million!
Dave

[ChrisRath]

Re: getElementById help

You've got double quotes in the javascript statement that are not escaped out.
Either use single quotes for the embedded parts:

document.getEle mentById("fullp icture").innerH TML="<img
src='images/portfolio/photo1.jpg' border='0' alt='One'>";

or use the escape sequence:

document.getEle mentById("fullp icture").innerH TML="<img
src=\"images/portfolio/photo1.jpg\" border=\"0\" alt=\"One\">";

[color=blue]
>I still not advanced at javascript and I am trying to do a picture portfolio
>page where there is a scrollable area with thumbnails. When you click on the
>thumbnail, I want to use document.getEle mentIDBy to change which picture is
>displayed in the fullsize area. Everything seems right, but I keep getting
>an error:
>
>*Line: 3 | Error: Expected ';' *
>
>I am kinda boggled because I clearly closed with * ; * If anyone could help,
>or if there is a better way to do it, please let me know.
>
>Here is the code that applies:
>
>HTML: <div id="picdisplay" ><table align="center" width="100%"
>height="100%"> <tr><td id="fullpicture " align="center"
>valign="middle "></td></tr></table></div>
>
>JAVASCRIPT: function one1() {
>document.getEl ementById("full picture").inner HTML="";
>}
>
>actual page: http://members.shaw.ca/sceniclandscapes/portfolio.htm
>
>In advance, Thanks a million!
>Dave
>
>
>[/color]

[Thomas 'PointedEars' Lahn]

Re: getElementById help

ChrisRath schrieb:[color=blue]
> You've got double quotes in the javascript statement that are not escaped out.
> Either use single quotes for the embedded parts:
>
> document.getEle mentById("fullp icture").innerH TML="<img
> src='images/portfolio/photo1.jpg' border='0' alt='One'>";
>
> or use the escape sequence:
>
> document.getEle mentById("fullp icture").innerH TML="<img
> src=\"images/portfolio/photo1.jpg\" border=\"0\" alt=\"One\">";[/color]

Or

document.getEle mentById("fullp icture").innerH TML =
'<img src="images/portfolio/photo1.jpg" border="0" alt="One">';

However, this is a DOM mix known to be error-prone:
document.getEle mentById() is part of W3C DOM Level 1+.
The "innerHTML" property is part of proprietary DOMs.
Both should not be combined untested.

Instead, one should either use proprietary DOMs, in IE for example:

var o = document.all("f ullpicture");
if (o && o.innerHTML)
{
o.innerHTML = ...
}

or the W3C DOM:

var o = document.getEle mentById("fullp icture");
if (o
&& typeof o.firstChild != "undefined"
&& typeof o.removeChild != "undefined"
&& typeof document.create Element != "undefined" )
&& typeof o.appendChild != "undefined" )
{
// remove all child elements
while (o.firstChild)
{
o.removeChild(o .firstChild);
}

// append "img" element as only child element
var o2 = document.create Element("img");
if (o2)
{
o2.src = "images/portfolio/photo1.jpg";
o2.border = "0";
o2.alt = "One";
o.appendChild(o 2);
}
}

or test if a combination of both is supported by the UA
before it is used:

var o = document.getEle mentById("fullp icture");
if (o)
{
if (o.innerHTML)
{
o.innerHTML = ...;
}
else (if typeof o.firstChild != "undefined"
&& ...)
{
// see above
}
}

A DHTML library, such as <http://pointedears.de/scripts/dhtml.js>,
can provide for easy DOM scripting, selecting an adequate access
method for the respective UA using feature detection.


PointedEars

[Richard Cornford]

Re: getElementById help

Thomas 'PointedEars' Lahn wrote:[color=blue]
> ChrisRath schrieb:[/color]
<snip>[color=blue]
> However, this is a DOM mix known to be error-prone:
> document.getEle mentById() is part of W3C DOM Level 1+.
> The "innerHTML" property is part of proprietary DOMs.
> Both should not be combined untested.[/color]

Both should not be used untested, ever. But combining W3C with
proprietary DOM features is not any more error prone than browser
scripting in general. And given that browsers implement parts of both to
some extent, a pragmatic approach of using what is available (probably
preferring W3C DOM), when available, will tend to result in
cross-browser code with the largest base of actively supporting
browsers.

<snip>[color=blue]
> if (o
> && typeof o.firstChild != "undefined"
> && typeof o.removeChild != "undefined"
> && typeof document.create Element != "undefined" )
> && typeof o.appendChild != "undefined" )
> {[/color]
<snip>[color=blue]
> if (o)
> {
> if (o.innerHTML)
> {
> o.innerHTML = ...;
> }[/color]
<snip>

I don't really agree with using - typeof - to test properties of objects
that may be only objects/methods or undefined where a type-converting
test would produce the same results more efficiently, but testing -
innerHTML - really needs a - typeof - test because if it returns an
empty string you will get a false negative from a type-converting test.

Richard.