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.getElementIDBy 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.getElementById("fullpicture").innerHTML=" <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]

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

document.getElementById("fullpicture").innerHTML=" <img
src='images/portfolio/photo1.jpg' border='0' alt='One'>";

or use the escape sequence:

document.getElementById("fullpicture").innerHTML=" <img
src=\"images/portfolio/photo1.jpg\" border=\"0\" alt=\"One\">";

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.getElementIDBy 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.getElementById("fullpicture").innerHTML= "";
}

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

In advance, Thanks a million!
Dave

[Thomas 'PointedEars' Lahn]

ChrisRath schrieb:

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

document.getElementById("fullpicture").innerHTML=" <img
src='images/portfolio/photo1.jpg' border='0' alt='One'>";

or use the escape sequence:

document.getElementById("fullpicture").innerHTML=" <img
src=\"images/portfolio/photo1.jpg\" border=\"0\" alt=\"One\">";

Or

document.getElementById("fullpicture").innerHTML =
'<img src="images/portfolio/photo1.jpg" border="0" alt="One">';

However, this is a DOM mix known to be error-prone:
document.getElementById() 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("fullpicture");
if (o && o.innerHTML)
{
o.innerHTML = ...
}

or the W3C DOM:

var o = document.getElementById("fullpicture");
if (o
&& typeof o.firstChild != "undefined"
&& typeof o.removeChild != "undefined"
&& typeof document.createElement != "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.createElement("img");
if (o2)
{
o2.src = "images/portfolio/photo1.jpg";
o2.border = "0";
o2.alt = "One";
o.appendChild(o2);
}
}

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

var o = document.getElementById("fullpicture");
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]

Thomas 'PointedEars' Lahn wrote:

ChrisRath schrieb: <snip> However, this is a DOM mix known to be error-prone:
document.getElementById() is part of W3C DOM Level 1+.
The "innerHTML" property is part of proprietary DOMs.
Both should not be combined untested.
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> if (o
&& typeof o.firstChild != "undefined"
&& typeof o.removeChild != "undefined"
&& typeof document.createElement != "undefined")
&& typeof o.appendChild != "undefined")
{ <snip> if (o)
{
if (o.innerHTML)
{
o.innerHTML = ...;
}

<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.