Question

我试图通过JS和HTML模拟游戏。我的问题是，当我尝试添加它赢得的值时，它不会处理它并更改值。

我正在尝试添加所有积分，并将它们放在带有TotalPoints类的div中。

我也尝试过使用：

var div = document.getElementsByClassName('TotalPoints'); div.innerHTML = sum;

提前致谢

Answer 1

您可以使用each循环遍历所有.Points，并使用.TotalPoints在text内设置值。

var total = 0;
$('.Points').each(function() {
    total += parseInt($(this).text(), 10);
});
$('.TotalPoints').text(total);

演示：https://jsfiddle.net/tusharj/rwybp41e/2/

Answer 2

您在小提琴中定位了错误的ID和类，并且您没有包含jQuery库。

HTML：

<div id="TotalPoints"></div>
<div class="total-points">0</div>

CSS：

.total-points {
    padding: 8px;
    //background: blue;
    width: 20px;
    float:right;
    margin-top: 4px;
}

使用Javascript：

// Add all "Points" class together  

var sum = 0;
$('.Points').each(function () {
    sum += parseFloat($(this).text());
});
$('.total-points').text(sum);

这是一个有效的演示：

http://jsfiddle.net/rwybp41e/3/

Answer 3

由于您感兴趣的数据是将一组点数减少为一个总数，因此您可以使用Array.reduce在功能上更多地计算总数：

$('.TotalPoints').text($('.Points')
                .toArray()
                .reduce(function (agg, point) { 
                    return agg + parseInt($(point).text(), 10); 
                }, 0));

工作示例：https://jsfiddle.net/rwybp41e/4/

让JS在替换时将所有字段添加到一起

3 个答案: