overwriting innerHTML from inside the function

[white lightning]

I have the following function:

function overwrite(div_id, image_id) {
if (document.getElementById(div_id).style.display=="none") {
document.getElementById("spex").innerHTML = "<a
href="+"javascriptverwrite('sp', 'img1')"+">Close</a>";
}
}

is the syntax correct?

in the browser, the URL for "Close" only shows half of it, something
like this: javascriptverwrite('sp',

can someone help me?

thanks!

 

[Anthony Levensalor]

white lightning said:

I have the following function:

function overwrite(div_id, image_id) {
if (document.getElementById(div_id).style.display=="none") {
document.getElementById("spex").innerHTML = "<a
href="+"javascriptverwrite('sp', 'img1')"+">Close</a>";
}
}

is the syntax correct?

Above, your innerHTML ends up being:

<a href=javascriptverwrite('sp', 'img1')>Close</a>

And with the space and no delineation for the string, it stops the
attribute at the space.

You could try:

document.getElementById("spex").innerHTML =
'<a href="javascriptverwrite(\'sp\', \'img1\')">Close</a>';

Which would then get written as:
<a href="javascriptverwrite('sp', 'img1')">Close</a>

But you'd want to put it in the onlick handler, in my opinion.
javascript:href has never done me any favors.

As an aside, I've always found innerHTML to be somewhat more clunky than
manipulating the DOM directly, and a lot more error prone.

I'd implement something like:

var newLink = document.createElement("a");
newLink.onclick = function() { overwrite('sp', 'img1'); return false; };
newLink.appendChild(document.createTextNode("Close"));

document.getElementById(div_id).appendChild(newLink);

IMHO, of course.

~A!

 

[RobG]

I have the following function:

function overwrite(div_id, image_id) {
if (document.getElementById(div_id).style.display=="none") {
document.getElementById("spex").innerHTML = "<a
href="+"javascriptverwrite('sp', 'img1')"+">Close</a>";

When posting code, manually wrap it at about 70 characters so that
autowrapping doesn't introduce more errors. You should not abuse a
link this way: a link is expected to open a new page or navigate to
some other location, it is not expected to be script-dependent. You
should be using a button:

document.getElementById("spex").innerHTML =
'<button onclick="overwrite(\'sp\', \'img1\');">Close</button>';


or instead of quoting the inner quotes, use character entities:

document.getElementById("spex").innerHTML =
'<button onclick="' +

}
}

is the syntax correct?

In terms of javascript, yes - but the HTML isn't. The value that you
are assigning to the href attribute contains characters that require
the entire value to be quoted:

in the browser, the URL for "Close" only shows half of it, something
like this: javascriptverwrite('sp',

Because you didn't quote the href attribute value. But as indicated,
you should be using an onclick attribute anyway.

 

[Thomas 'PointedEars' Lahn]

I have the following function:

function overwrite(div_id, image_id) {
if (document.getElementById(div_id).style.display=="none") {
document.getElementById("spex").innerHTML = "<a
href="+"javascriptverwrite('sp', 'img1')"+">Close</a>";

[...] You should not abuse a link this way: a link is expected
to open a new page or navigate to some other location, it is not
expected to be script-dependent. You should be using a button:

document.getElementById("spex").innerHTML =
'<button onclick="overwrite(\'sp\', \'img1\');">Close</button>';

For a button that has only a text as caption, the `input' element with the
`type' attribute value `button' should be used instead of the `button'
element because it is much more compatible.

The return value of methods should not be used as a reference base without a
prior type-converting test. A TypeError exception will be thrown (or the
equivalent of that happens of ES3 is not implemented) if the returned value
is not of type Reference, and the entire script may break at this point.

The proprietary `innerHTML' property should be avoided, and standardized
creator and mutator methods of W3C DOM Level 2 Core (or, where not
available, their proprietary equivalents) should be used instead. If
`innerHTML' is used anyway, it should not be used without a prior feature
test, especially not when in conjunction with DOM Level 2 methods:

var spex = document.getElementById("spex");
if (spex && typeof spex.innerHTML != "undefined")
{
spex.innerHTML = '<input type="button" value="Close"'
+ ' onclick="overwrite(\'sp\', \'img1\');">';
}


PointedEars