JavaScript计算DIV元素中不同字符串的平均值，仅使用一个类别而没有更改HTML

Question

我在学校的网站上创建一个插件。我只能使用JavaScript。我必须像示例中的任何数字一样做一个bergekining(1 68 7 98 12 23(/(10 100 10 10 10 100 20 100( * 100。ibb.co/r56kmqs结果必须像这样感谢您的时间

//only the beginning    
var i;
    var a;
    var b;
    var p1 = [];
    var el = document.getElementsByClassName('course_eval_cell');
    for (i = 0; i < el[i].length; i++) {
        if (el[i].innerHTML.charAt(i) = "/") {
            for (a = 0; a < i - 1; a++) {
                p1 += el[i].innerHTML.charAt(a);
            }
            alert(p1);
        }
    }

<div class="course_eval_cell hasGrade" smsctip="true">1/10</div>
<div class="course_eval_cell hasGrade" smsctip="true">68/100</div>
<div class="course_eval_cell hasGrade" smsctip="true">7/10</div>
<div class="course_eval_cell hasGrade" smsctip="true">98/100</div>
<div class="course_eval_cell hasGrade" smsctip="true">12/20</div>
<div class="course_eval_cell hasGrade" smsctip="true">23/100</div>
<div class="course_eval_cell"></div>
<div class="course_eval_cell" id="12"></div>
<script>
 // code here
</script>

我希望(1 68 7 98 12 23(的输出(10 100 10 10 10 100 20 100( * 100为61.4

Answer 1

如果我了解您的问题，那么这种方式怎么样？

//only the beginning    
var i, a, b;
var p1 = 0;
var p2 = 0;
var el = document.getElementsByClassName('hasGrade');
for (i = 0; i < el.length; i++) {
  [a, b] = el[i].innerHTML.split('/');
  p1 += parseInt(a);
  p2 += parseInt(b);
}
result = ((p1 / p2) * 100).toFixed(2);
console.log(result);
document.getElementById("12").innerHTML = result;

<div class="course_eval_cell hasGrade" smsctip="true">1/10</div>
<div class="course_eval_cell hasGrade" smsctip="true">68/100</div>
<div class="course_eval_cell hasGrade" smsctip="true">7/10</div>
<div class="course_eval_cell hasGrade" smsctip="true">98/100</div>
<div class="course_eval_cell hasGrade" smsctip="true">12/20</div>
<div class="course_eval_cell hasGrade" smsctip="true">23/100</div>
<div class="course_eval_cell"></div>
<div class="course_eval_cell" id="12"></div>

Answer 2

这是一种方法。这个想法是：

• 迭代元素，例如使用reduce(进一步参见为什么这是一个好候选人(
• 使用split
将其文本内容分为两个部分
• 使用Unary +操作员将这些零件从字符串转换为数字
• 总和第一部分并使用reduce总和第二部分，这给出了两个结果(作为两个数字的数组(
• 执行该部门。同样，您可以使用reduce(它使其成为功能编程样式(
• 使用toFixed
使用两个小数的结果格式化结果

document.getElementById("12").textContent = [...document.querySelectorAll(".hasGrade")]
    .reduce((acc, elem) => {
        const parts = elem.textContent.split("/");
        return acc.map((sum, i) => sum += +parts[i]);
    }, [0, 0])
    .reduce((a, b) => a/b*100)
    .toFixed(2);

<div class="course_eval_cell hasGrade" smsctip="true">1/10</div>
<div class="course_eval_cell hasGrade" smsctip="true">68/100</div>
<div class="course_eval_cell hasGrade" smsctip="true">7/10</div>
<div class="course_eval_cell hasGrade" smsctip="true">98/100</div>
<div class="course_eval_cell hasGrade" smsctip="true">12/20</div>
<div class="course_eval_cell hasGrade" smsctip="true">23/100</div>
<div class="course_eval_cell"></div>
<div class="course_eval_cell" id="12"></div>