Replace text in text box with innerhtml type thing

[bobd314]

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.

 

[RobG]

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

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.

 

[Yanick]

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

 

[Richard Cornford]

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.

 

[Yanick]

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.

 

[Richard Cornford]

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

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.

 

[darwinist]

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

 

[Yanick]

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.