Using Javascript to display weights

Question

I have a javascript function that changes a user preference, if they want weights to be metric or in imperial.

On my page I print out the weight, IE:

This is some description:

This product weights <b>200 KG</b>

Blah blah

I need to make it so that Javascript changes the weight measurement for all weights on the page, and am not sure the best way to tackle this. Can you create your own tags, or tag properties?

Thanks for any suggestions, JQuery is fine.

Answer 1

I would add a class .weight and use this to target all the weights..

$('.weight').each(function(){...})

If you want to change the innerHTML you can use the html() method directly

$('.weight').html(function(idx, oldhtml){
 // you can use the oldhtml to extract info and create the new text here..
  $(this).html( ../*you new html here*/.. ); // replace existing with new html ..
})

Answer 2

HTML:

<b class="weight">200 KG</b>

Javascript:

$("#UnitChangeButton").click(function() {
  $('.weight').each(function(){
    txt = $(this).text();
    newTxt = convert(txt);
    $(this).text(newTxt);
  });
});

You need to implement the convert function. You can store the state (metric or imperial) in a javascript variable.