Replace text in text box with innerhtml type thing

Discussion in 'Javascript' started by bobd314@gmail.com, Aug 2, 2006.

  1. Guest

    Currently, I am having a problem replacing the value of a input box
    with something else using the innerHTML thing. Right now I have
    something going

    <script type="text/javascript"><!--
    function changeText(newText){
    document.getElementById("WHATEVER").innerHTML=newText
    }
    //-->
    </script>

    and a link with

    <a href='javascript:changeText("Hola Mi Amigo")'>Dont know</a>

    and the text box like

    <INPUT TYPE="TEXT" NAME="WHATEVER" id="WHATEVER" VALUE="TESTING"
    SIZE=60">

    and I am trying to replace what is enterd in the text box with "Hola Mi
    Amigo." However, it doesnt seem to want to do it. Maybe I am doing
    something wrong, but I have no idea what my problem is.
     
    , Aug 2, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > Currently, I am having a problem replacing the value of a input box
    > with something else using the innerHTML thing. Right now I have
    > something going
    >
    > <script type="text/javascript"><!--


    Do not use HTML-style comments inside script elements, they are a
    complete waste of time.


    > function changeText(newText){
    > document.getElementById("WHATEVER").innerHTML=newText


    innerHTML is proprietary DOM element property introduced by IE. It has
    been widely copied (though inconsistently) and represents the HTML
    between the start and end tags of an element - i.e. it's HTML content.


    > }
    > //-->
    > </script>
    >
    > and a link with
    >
    > <a href='javascript:changeText("Hola Mi Amigo")'>Dont know</a>


    Using the javascript pseudo-protocol as the value of an href attribute
    is a bad idea. If you want to use an A element, use an onclick
    attribute with return false to cancel navigation:

    <a href="#" onclick="changeText('Hola Mi Amigo');return false;">Dont
    know</a>


    > and the text box like
    >
    > <INPUT TYPE="TEXT" NAME="WHATEVER" id="WHATEVER" VALUE="TESTING"
    > SIZE=60">


    As noted above, the innerHTML property of an element represents its
    HTML content. Since INPUT elements don't have any content, it's
    difficult to say what the browser will make of assigning some HTML to
    its innerHTML property. There is no public specification that says how
    to handle it, so implementations may differ.

    It is likely, but not guaranteed, that they will simply ignore it.

    If you are trying to change the text that appears in the text input,
    then change the input's value attribute.


    > and I am trying to replace what is enterd in the text box with "Hola Mi
    > Amigo." However, it doesnt seem to want to do it. Maybe I am doing
    > something wrong, but I have no idea what my problem is.


    <a href="#" onclick="
    document.getElementById('WHATEVER').value = 'Hola Mi Amigo';
    return false;
    ">Dont know</a>


    Feature detection omitted for brevity.


    --
    Rob
     
    RobG, Aug 2, 2006
    #2
    1. Advertising

  3. Yanick Guest

    RobG wrote:
    >
    > <a href="#" onclick="
    > document.getElementById('WHATEVER').value = 'Hola Mi Amigo';
    > return false;
    > ">Dont know</a>
    >
    >


    RobG I agree with you, though I may add that inline Javascripts inside
    HTML tags should be limited to function calls. This way, separation
    between HTML design and Script design is more well defined.

    thus : <a onclick="changeText('Hola Mi Amigo');">Don't know</a>

    (NOTE : http://www.w3.org/TR/html401/struct/links.html states that <a>
    -- anchor -- tags don't have to have a href property...)

    or :

    <a id="someId">Don't know</a>

    <script type="text/javascript">
    document.getElementById('someId').onclick = function() {
    changeText('Hola Mi Amigo'); };
    </script>

    Error detections omitted for clarity.
     
    Yanick, Aug 2, 2006
    #3
  4. Yanick wrote:
    > RobG wrote:
    >>
    >> <a href="#" onclick="
    >> document.getElementById('WHATEVER').value = 'Hola Mi Amigo';
    >> return false;
    >> ">Dont know</a>

    >
    > RobG I agree with you, though I may add that inline Javascripts inside
    > HTML tags should be limited to function calls. This way, separation
    > between HTML design and Script design is more well defined.


    That is not a practical suggestion, and likely to promote the
    misconception that functions called in the code of intrinsic event
    attributes are the actual event handlers, instead of the functions
    internally generated by the browser from those values.

    > thus : <a onclick="changeText('Hola Mi Amigo');">Don't know</a>
    >
    > (NOTE : http://www.w3.org/TR/html401/struct/links.html states that <a>
    > -- anchor -- tags don't have to have a href property...)

    <snip>

    But without the HREF attribute the A element will be unreachable by
    keyboard navigation (an accessibility issue), and with an HREF it will
    probably need - return changeText(" ... "); in order to cancel the
    navigation (denying the possibility of using only the function call).

    Richard.
     
    Richard Cornford, Aug 2, 2006
    #4
  5. Yanick Guest

    >
    > That is not a practical suggestion, and likely to promote the
    > misconception that functions called in the code of intrinsic event
    > attributes are the actual event handlers, instead of the functions
    > internally generated by the browser from those values.
    >


    Sure, <a id="someAnchor" href="#" onlick="changeText('blah'); return
    false;">Don't know</a> is in fact :
    document.getElementById('someAnchor').onclick = function(event) {
    changeText('blah'); return false; }; And I agree that it may promote
    misunderstood concepts of DOM events, but it is, in my opinion, also a
    bad coding practice to mix JS with HTML. Personnally, I use event
    attributes inside HTML tags not very often.

    It is the responsibility of every programmer to understand how the
    language works before building programming habbits. (And I do not
    exempt myself here.) Avoiding using function calls over inline
    javascript, so it doesn't confund the newbies about event handlers is
    not, in my point of view, a valid excuse. That's all.

    By the way, I did not know about the href being used for keyboard
    accessibility issues (doesn't make any sense to me still...). This
    aspect is not covered in the W3C document.
     
    Yanick, Aug 3, 2006
    #5
  6. Yanick wrote:
    >> That is not a practical suggestion, and likely to
    >> promote the misconception that functions called in
    >> the code of intrinsic event attributes are the actual
    >> event handlers, instead of the functions internally
    >> generated by the browser from those values.
    >>

    >
    > Sure, <a id="someAnchor" href="#" onlick="changeText('blah');
    > return false;">Don't know</a> is in fact :
    > document.getElementById('someAnchor').onclick = function(event) {
    > changeText('blah'); return false; }; And I agree that it may promote
    > misunderstood concepts of DOM events, but it is, in my opinion, also a
    > bad coding practice to mix JS with HTML.


    But if you put any code in the intrinsic event attributes you are mixing
    javascript and HTML, so recommending only putting function calls in
    those attribute values is already a compromise, and having already
    compromised it makes most sense to carry the compromise on to the point
    where cancelling the default actions of events becomes easy (as that is
    something that is often going to be wanted).

    <snip>
    > By the way, I did not know about the href being used for
    > keyboard accessibility issues (doesn't make any sense to
    > me still...).


    You have never seen anyone using the tab key to switch from link to link
    in an HTML page?

    > This aspect is not covered in the W3C document.


    Which document would you expect to cover it? The WCAG 1.0 document
    certainly requires that all actions that can be initiated with a
    pointing device also be initiated with a keyboard, and to 'click' a link
    with a keyboard you need to be able to first pass focus to that link
    using the keyboard (i.e. tabbing to the link).

    Richard.
     
    Richard Cornford, Aug 3, 2006
    #6
  7. Guest

    wrote:
    > Currently, I am having a problem replacing the value of a input box
    > with something else using the innerHTML thing. Right now I have
    > something going
    >
    > <script type="text/javascript"><!--
    > function changeText(newText){
    > document.getElementById("WHATEVER").innerHTML=newText
    > }
    > //-->
    > </script>
    >
    > and a link with
    >
    > <a href='javascript:changeText("Hola Mi Amigo")'>Dont know</a>
    >
    > and the text box like
    >
    > <INPUT TYPE="TEXT" NAME="WHATEVER" id="WHATEVER" VALUE="TESTING"
    > SIZE=60">
    >
    > and I am trying to replace what is enterd in the text box with "Hola Mi
    > Amigo." However, it doesnt seem to want to do it. Maybe I am doing
    > something wrong, but I have no idea what my problem is.


    Since you're using a text-input, it will have a "value" property that
    is settable as well as gettable. Since it's just plain text that you
    want to write, the .value property is fine.

    <script>
    function changeText(newText)
    { document.getElementById("WHATEVER").value = newText; }
    </script>

    hth

    http://darwinist.googlepages.com/htmldesktop.html
    (A free, open-source web-based IDE, windowing system, and desktop
    environment, in 31kB of html and javascript.)
     
    , Aug 4, 2006
    #7
  8. Yanick Guest

    > But if you put any code in the intrinsic event attributes you are mixing
    > javascript and HTML, so recommending only putting function calls in
    > those attribute values is already a compromise, [...]


    I'm not entirely a radical person :) I agree to make compromises to
    some point of view... Calling a function, then adding a "return false;"
    does not create any long term issue in the code. The idea behind
    limiting javascript inside event attributes of HTML elements is to put
    as much of the js commands at the same place in the document as
    possible. Perhaps, even, if that event has to be modified, the HTML
    portion won't have to be... But in general, I would think that we agree
    on this.

    >
    > You have never seen anyone using the tab key to switch from link to link
    > in an HTML page?
    >


    Sure, I've been using tabs some times. I even used Lynx a few times...
    I simply didn't know that anchors skipped tabs when href is omitted
    (which is, in my opinion, pretty stupid as it is an "anchor"). It's
    always good to know.
     
    Yanick, Aug 4, 2006
    #8
    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. Big Bill
    Replies:
    4
    Views:
    5,381
  2. Gnarlodious
    Replies:
    4
    Views:
    17,612
    elizas
    May 5, 2010
  3. Zam
    Replies:
    1
    Views:
    242
    Mark Schupp
    Mar 14, 2005
  4. mscir
    Replies:
    0
    Views:
    317
    mscir
    Oct 12, 2005
  5. sonic
    Replies:
    5
    Views:
    293
    Randy Webb
    Jul 11, 2006
Loading...

Share This Page