overwriting innerHTML from inside the function

Discussion in 'Javascript' started by white lightning, Jan 7, 2008.

  1. 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="+"javascript:eek:verwrite('sp', 'img1')"+">Close</a>";
    }
    }

    is the syntax correct?

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

    can someone help me?

    thanks!
     
    white lightning, Jan 7, 2008
    #1
    1. Advertising

  2. 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="+"javascript:eek:verwrite('sp', 'img1')"+">Close</a>";
    > }
    > }
    >
    > is the syntax correct?
    >


    Above, your innerHTML ends up being:

    <a href=javascript:eek:verwrite('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="javascript:eek:verwrite(\'sp\', \'img1\')">Close</a>';

    Which would then get written as:
    <a href="javascript:eek:verwrite('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!

    --
    anthony at my pet programmer dot com
     
    Anthony Levensalor, Jan 8, 2008
    #2
    1. Advertising

  3. white lightning

    RobG Guest

    white lightning wrote:
    > 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="+"javascript:eek:verwrite('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: javascript:eek:verwrite('sp',


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


    --
    Rob
     
    RobG, Jan 8, 2008
    #3
  4. RobG wrote:
    > white lightning wrote:
    >> 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="+"javascript:eek:verwrite('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
     
    Thomas 'PointedEars' Lahn, Jan 8, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?UmVkZHk=?=
    Replies:
    5
    Views:
    2,227
    =?Utf-8?B?UmVkZHk=?=
    Dec 28, 2005
  2. Dave Ficken
    Replies:
    0
    Views:
    673
    Dave Ficken
    Nov 8, 2003
  3. Sur
    Replies:
    4
    Views:
    224
  4. sonic
    Replies:
    5
    Views:
    308
    Randy Webb
    Jul 11, 2006
  5. poecke

    Javascript inside innerHTML problem

    poecke, Apr 5, 2008, in forum: Javascript
    Replies:
    5
    Views:
    285
    poecke
    Apr 8, 2008
Loading...

Share This Page