Рассчитать налог с цены, отображаемой в таблице HTML

Question

Я пытаюсь отобразить цену с учетом налога на странице продукта. Цена отображается в [OurPrice], поэтому мне нужно вывести отображаемую цену (например, 0,95 фунтов стерлингов), умножить ее на 1,2 и отобразить цену в фунтах. Вот код, который я пытаюсь использовать, однако он не отображает рассчитанную цену. Я хотел бы показать это с символом £ перед числом.

    <table cellspacing="1" cellpadding="0" border="0" >
  <tbody><tr>
    <td class="retail-price" valign="top" nowrap="">[RetailPriceTitle]</td>
    <td width="100%">[RetailPrice]</td>
  </tr><tr>
    <td class="our-price" valign="top" nowrap="">Our Price:</td>
    <td width="100%"><span id="op">[OurPrice]</span></td>
  </tr>
  <tr>
    <td class="incvat" valign="top" nowrap="">Inc Vat</td>
    <td class="incvat">

<script type="text/jscript">
var ours = document.getElementById("op").value;
  document.write (£(ours *1.2))

    </script>
</td>
  </tr>

  </tbody>
</table>

Answer 1

Это не синтаксически верный JavaScript. Попробуйте что-то вроде этого:

var ourPrice = document.getElementById("op").innerHTML; // fetch the price
ourPrice = ourPrice.replace('£', ''); // remove pound character
ourPrice = parseFloat(ourPrice); // convert price from a string to a number
var incVat = ourPrice * 1.2; // calculate the price with tax
document.write('£' + incVat); // write the result

http://jsfiddle.net/RjWMK/

---

Однако в этом коде есть и другие проблемы, которые являются целыми другими темами сами по себе и выходят за рамки этого ответа. Но в качестве исследовательского упражнения:

1. Не использовать document.write(), Вместо этого запустите скрипт, который находит значение после загрузки всей страницы, а затем вставляет значение в содержимое правильного узла.

2. Правильно отформатируйте результат, используя что-то вроде number.toFixed(2) или библиотека форматирования валюты.

Answer 2

Согласно ответу Алекса, нужно поставить вот так

<td width="100%">£10.0</td>

Answer 3

Я собираюсь добавить к тому, что Алекс Уэйн уже сказал.

Я бы взял ваш JS-код за пределами блока ячеек таблицы и поместил его в заголовок до начала тега. Затем я взял бы код Алекса и поместил его в блок "window.onload = function(){ // ваш код здесь}", чтобы он выполнялся после загрузки страницы.

И тогда вместо использования "document.write()" я бы последовал совету Алекса и заменил строку "document.write" другой строкой, которая будет записывать значение "incVat" непосредственно в ячейку таблицы.

Присвойте пользовательский идентификатор ячейке таблицы, в которую вы хотите вывести значение, например, "incvatValue".

<td class="incvat" id="incvatValue"> </td>

Затем напишите эту строку кода:

document.getElementById("incvatValue").innerHTML = incVat;

Когда вы закончите, ваш JS должен выглядеть следующим образом, и он не должен быть внутри ячейки таблицы:

<script type="text/javascript">
window.onload = function(){
    var ourPrice = document.getElementById("op").innerHTML; // fetch the price
    ourPrice = ourPrice.replace('£', ''); // remove pound character
    ourPrice = parseFloat(ourPrice); // convert price from a string to a number
    var incVat = ourPrice * 1.2; // calculate the price with tax
    document.getElementById("incvatValue").innerHTML = incVat; // write the result
}
</script>

<td class="incvat" id="incvatValue"> </td>

Кстати, вы можете заменить "incvatValue" на что угодно, просто убедитесь, что идентификатор в ячейке таблицы совпадает с идентификатором, вызываемым в JS.