时间戳

首页 > 解决方案 > 如何更改 div 类中的数字并更新它？

javascript - 如何更改 div 类中的数字并更新它？

问题描述

我正在尝试更改网站上现有的 HTML 代码。请参见下面的示例：

var multiplier = 1.5;
const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0
})
        
//for first two occurences
var priceEls = document.getElementsByClassName("price");
for (var i = 0; i < priceEls.length; i++) {
    var price = priceEls[i].innerText;
    var priceN = getNumber(price)*multiplier;
    alert("Price: " + formatter.format(priceN));
}
//for last occurence
var priceEls = document.getElementsByClassName("column--container value-item");
for (var i = 0; i < priceEls.length; i++) {
    var price = priceEls[i].innerText;
    //alert("Price: " + price);
    var priceN = getNumber(price)*multiplier;
    alert("Price: " + formatter.format(priceN));
}
        
function getNumber(myString) {
    var numb = myString.match(/\d/g);
    numb = numb.join("");
    //alert (numb);
    return(parseInt(numb));
}
<div class="price">$2,000</div>
<div class="price">
    <span>$</span>
    3,000
</div>
<div class="column--container value-item">
    <span class="text-semibold-xs">Price</span>
    $1,500                  
</div>

如何使用这些新值更新 HTML 代码？

标签： javascripthtml

解决方案

计算新价格后您可以做的一件事innerText是使用您在警报中使用的文本设置元素的。所以你的一个循环可能看起来像这样

for (var i = 0; i < priceEls.length; i++) {
  var price = priceEls[i].innerText;
  var priceN = getNumber(price)*multiplier;
  priceEls[i].innerText = "Price: " + formatter.format(priceN);
}

我建议使用forEachfor 循环而不是for.

推荐阅读