By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,397 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

How to set text in a cell

P: n/a
My web page has thumbnail pictures, and when the user clicks on a
thumbnail, I change the image source of a full-size image elsewhere on
the page. I'd also like to change the caption of the full-size image,
but I'm not sure how to set the value of the text. I've tried creating
a form with a single input field, and I can set the value of that
field, but the field has a sunken style that I can't get rid of, and
I'd like to find a different way of displaying the text.

Is there an easier way to change the value of a text field?

Thanks,

Tom

Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On Wed, 09 Mar 2005 14:31:04 -0800, ziggy.696040 wrote:
My web page has thumbnail pictures, and when the user clicks on a
thumbnail, I change the image source of a full-size image elsewhere on
the page. I'd also like to change the caption of the full-size image,
but I'm not sure how to set the value of the text. I've tried creating
a form with a single input field, and I can set the value of that
field, but the field has a sunken style that I can't get rid of, and
I'd like to find a different way of displaying the text.

Is there an easier way to change the value of a text field?

Thanks,

Tom


You don't need a form. Use an anchor and the innerHTML function.

<a name='myanchor'></a>

document.myanchor.innerHTML = '<b>my file name</b>';

Will change the page to:

<a name='myanchor'><b>my file name</b></a>

--
Life is short, but wide. -KV

Jul 23 '05 #2

P: n/a
Ivan Marsh wrote:
On Wed, 09 Mar 2005 14:31:04 -0800, ziggy.696040 wrote:

My web page has thumbnail pictures, and when the user clicks on a
thumbnail, I change the image source of a full-size image elsewhere on
the page. I'd also like to change the caption of the full-size image,
but I'm not sure how to set the value of the text. I've tried creating
a form with a single input field, and I can set the value of that
field, but the field has a sunken style that I can't get rid of, and
I'd like to find a different way of displaying the text.

Is there an easier way to change the value of a text field?

Thanks,

Tom

You don't need a form. Use an anchor and the innerHTML function.


The OP is better off to use a <span> rather than an <a> tag.

<a> is intended for navigation, either as a destination
(anchor) or link, whereas <span> is for in-line markup and does
not infer any presentational idiom or display characteristics
and therefore seems to better suit the OP's need.

<a name='myanchor'></a>

document.myanchor.innerHTML = '<b>my file name</b>';

Will change the page to:

<a name='myanchor'><b>my file name</b></a>


Not in any browser I tested. Removing "document." provides an
IE specific way of referencing a named element that will not
work in most other browsers.

A better, cross browser, standards compliant method is to add a
span in the HTML where the text is to appear, then modify its
content:

<span id="caption_00">the caption will appear here</span>

Then on the thumbnail onclick, add the script to change it:

<img ... onclick="changeCaption('caption_00',
'Here is the new caption');" ...>

And somewhere in the page (preferably in the head), put the
script that modifies the caption:

<script type="text/javascript">
function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).firstChild.data = txt;
} else if (document.all) {
document.all[ele].firstChild.data = txt;
}
}
</script>

The function could be made more generic by having it use the
alt tag of the image for the caption and if its id is related to
the image to the id of the span, then the onclick could be
attached dynamically so that there is no need to add code for
the onclick to every thumbnail.

Always remembering of course that users without JavaScript
support will not see anything happen when the thumbnail is
clicked.
--
Rob
Jul 23 '05 #3

P: n/a
RobG wrote:
[...]
A better, cross browser, standards compliant method is to add a
span in the HTML where the text is to appear, then modify its
content:

<span id="caption_00">the caption will appear here</span>
Should mention that the suggested method only works if there
something in the <span> already, that is, that it has a
firstChild. If the span is intended to be empty, then use a
non-breaking space as the default:

<span id="caption_00">&nsbp;</span>

or modify the non-standard-but-widely-supported innerHTML
attribute of the span:

[...] function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).firstChild.data = txt;
} else if (document.all) {
document.all[ele].firstChild.data = txt;
}


function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).innerHTML = txt;
} else if (document.all) {
document.all[ele].innerHTML = txt;
}

[...]

--
Rob
Jul 23 '05 #4

P: n/a
DU
RobG wrote:
RobG wrote:
[...]
A better, cross browser, standards compliant method is to add a
span in the HTML where the text is to appear, then modify its
content:

<span id="caption_00">the caption will appear here</span>

Should mention that the suggested method only works if there
something in the <span> already, that is, that it has a
firstChild.


Since the function targets only a specific node under controlled
circumstances (design requirements are clear and limited), then it is
safe to ignore this issue. If you want to use a more generic, more
general function for setting text of a node (or subtree) - and I do not
recommend doing so here -, then you need to create a function meeting
such design requirements.

If the span is intended to be empty, then use a non-breaking space as the default:

<span id="caption_00">&nsbp;</span>

or modify the non-standard-but-widely-supported innerHTML
attribute of the span:

[...]
function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).firstChild.data = txt;
} else if (document.all) {
document.all[ele].firstChild.data = txt;
}

function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).innerHTML = txt;

All of the browsers which support getElementById also support nodeType
attribute, nodeName attribute, firstChild, childNodes[], nodeValue and
data attributes so there is no need to resort to innerHTML here. Very
very few browsers still in use today on the web do not support
firstChild.data (or childNodes[0].nodeValue) and, in which case - eg
MSIE 4 -, innerText will be much faster, efficient.
} else if (document.all) {
document.all[ele].innerHTML = txt;
}

[...]


DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.6 :)
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.