html内容中的数字越来越多

时间:2017-01-13 23:53:37

标签: javascript html html5

我想增加HTML内容的数量并将其格式化为货币,例如:“$ 12.50”。

在我的情况下,有一系列的价格和产品,代码必须访问相应的数组,意图选择产品,找到它的价格,如果HTML中没有值,则将值发送给HTML标记,如果html标记中有一些值,则增加到现有值。

示例:

function(product, amount){
// search the index
var index = arrayProduct.indexOf(product);

// points the element by index
var price = arrayPrices[index];

// If the tag is empty, it sends, if there is any value in the tag, it increases
document.getElementById("idPrice").innerHTML = price;
}

1 个答案:

答案 0 :(得分:1)

假设您要将价格添加到 idPrice 元素中的任何内容,您可以执行以下步骤:

  1. 首先删除不属于该数字的字符(例如美元符号)来解析当前内容;
  2. 将其转换为数字,并将空字符串设为0
  3. 为其添加价格
  4. 再次将其格式化为货币金额
  5. 将其放入 idPrice
  6. 以下是执行此操作的代码:

    var elem = document.getElementById("idPrice");
    elem.textContent = '$ ' + (+elem.textContent.replace(/[^\d.]/, '') + price).toFixed(2)
    

    一般情况下,对于非HTML内容,最好使用textContent代替innerHTML

    此外,如果您将 idPrice 中存储的价格维持在数字变量中会更好,这样您就不必在每次添加时都解码格式化的价格。

    这是一个允许选择产品的简单代码段。单击“添加”按钮时,将调用该函数:

    var arrayProduct = ['coffee', 'pizza', 'apple pie', 'wine'];
    var arrayPrices = [1.10, 5.13, 3.90, 2.99];
    
    function updateTotal(product){
        // Search the index
        var index = arrayProduct.indexOf(product);
        if (index == -1) return; // exit when product not found
        // There is a match. Get the corresponding price
        var price = arrayPrices[index];
        // Convert the tag content to number, add the price and update the  
        // tag content accordingly
        var el = document.getElementById("idPrice");
        el.textContent = '$ ' + (+el.textContent.replace(/[^\d.]/, '') + price).toFixed(2);
    }
    
    document.querySelector('button').onclick = function () {
        updateTotal(document.querySelector('select').value);
    };
    <select>
        <option></option>
        <option value="coffee">coffee ($ 1.10)</option>
        <option value="pizza">pizza ($5.13)</option>
        <option value="apple pie">apple pie ($ 3.90)</option>
        <option value="wine">wine ($ 2.99)</option>
    </select>
    <button>Add</button><br>
    
    Total: <span id="idPrice"></span>