CODEWITHSUNDEEP
javascripthtml
srh snl
srh snl

Reputation: 807

How to change the displayed text in label (for Internationalization)

I have an html file that contains something like this

> <label id="remem" for"remem"><input type"checkbox"
> name="remem"/>Test</label>

now Im dealing with i18n and working on translating these words. And what I need to do is Translate the word Test into a different language.

How do I change the label (in my example.."Test" ) programmatically?? What attribute should I deal with?

Thanks!

Upvotes: 0

Views: 1319

Answers (3)

HoangHieu
HoangHieu

Reputation: 2840

try this

 <span id="rememText">Test</span>

 $("#rememText").innerHtml("string text");

or

<span id="rememText">Test</span>
$("#rememText").val("string text");

Upvotes: 0

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

@SajithNair's answer certainly works, and for small projects it is quite workable.

For large projects, however, you might find that you need something a bit more organized.

Choice 1

Letting server-side code handle it.

Depending on your server-side framework, this may be the best solution.

Choice 2

Letting a client-side framework handle it.

If you are using something like Knockout, it is a simple matter to decorate your labels with the right bindings and letting Knockout magic happen.

<label for="myfield">
  <span data-bind="html: resources.myFieldLabelText"></span>
  <input id="myfield" name="myfield">
</label>

Choice 3

If you are not using Knockout, or you decide that making all of your resources observable is too much of a hit, using data-attributes and then swapping out text that way can work.

<label for="myfield">
  <span data-label-resource="myfieldResourceKey"></span>
  <input id="myfield" name="myfield">
</label>

jQuery/sizzle has a nice engine to handle finding things by data-*, otherwise you can drop back to querySelectorAll. Failing that and you are supporting an ANCIENT browser, you can walk the DOM.

The advantage of using the resource keys like this, rather than doing things ad-hoc on a per-field basis, is that if you re-use a value (say, entry or display, or you use it on multiple pages) you only have one resource that needs translated, as opposed to multiple instances.

Upvotes: 1

SajithNair
SajithNair

Reputation: 3867

Give the text inside a <span> tag with id

> <label id="remem" for"remem"><input type"checkbox"
> name="remem"/><span id="rememText">Test</span></label>

Then you can use javascript to manipulate the text.

document.getElementById("rememText").innerHTML = "another language";

Upvotes: 1

Related Questions