Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > overwriting innerHTML from inside the function

Reply
Thread Tools

overwriting innerHTML from inside the function

 
 
white lightning
Guest
Posts: n/a
 
      01-07-2008
I have the following function:

function overwrite(div_id, image_id) {
if (document.getElementById(div_id).style.display=="n one") {
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!
 
Reply With Quote
 
 
 
 
Anthony Levensalor
Guest
Posts: n/a
 
      01-08-2008
white lightning said:
> I have the following function:
>
> function overwrite(div_id, image_id) {
> if (document.getElementById(div_id).style.display=="n one") {
> 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(newLin k);

IMHO, of course.

~A!

--
anthony at my pet programmer dot com
 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      01-08-2008

white lightning wrote:
> I have the following function:
>
> function overwrite(div_id, image_id) {
> if (document.getElementById(div_id).style.display=="n one") {
> 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="' +
'overwrite('sp', 'img1');">Close</button>';


> }
> }
>
> 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:

<URL: http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2 >


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


--
Rob
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      01-08-2008
RobG wrote:
> white lightning wrote:
>> I have the following function:
>>
>> function overwrite(div_id, image_id) {
>> if (document.getElementById(div_id).style.display=="n one") {
>> 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
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Javascript inside innerHTML problem poecke Javascript 5 04-08-2008 06:16 PM
Defining a function inside a function. Whats this feature ? How touse inside a class ? Sur Ruby 4 01-08-2008 02:50 PM
xhtml, innerHtml, appendChild, and innerHTML. what is the exact proper way to do this with DOM sonic Javascript 5 07-11-2006 08:17 AM
..HtmlControls.HtmlInputFile.Saveas(filename) not overwriting =?Utf-8?B?UmVkZHk=?= ASP .Net 5 12-28-2005 07:58 PM
AXIS and Java - concurrent transactions overwriting each other Dave Ficken Java 0 11-08-2003 02:19 PM



Advertisments