问题总数除以机会总数。仅使用JavaScript。 div元素

时间:2019-05-25 19:22:57

标签: javascript

我已经要求它提供1个列表,但是我不能让它用于2个或更多列表,结果始终显示NaN。我必须分别计算每个列表的平均值。该示例的公式为“(10 + 61)/(10 + 100)* 100”。这是一个链接,它在“ https://ibb.co/6g2bCYJ”总数中的显示方式 谢谢您的时间

<div class="grid_course_evals" style="width: 1061px;">

                <div class="course_eval_row cf" style="width:770px;">
                    <div class="course_eval_cell hasGrade" smsctip="true">10/10</div>
                    <div class="course_eval_cell hasGrade">61/100</div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                </div>

                <div class="course_eval_row cf" style="width:770px;">
                    <div class="course_eval_cell hasGrade isLow" smsctip="true">5/12</div>
                    <div class="course_eval_cell hasGrade  ">16/24</div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                    <div class="course_eval_cell"></div>
                </div>

            </div>

 function start() {
    var xclass = document.getElementsByClassName("course_eval_row");

    var i, a, b, k;
    var p1 = 0;
    var p2 = 0;
    var el = document.getElementsByClassName('course_eval_cell');
    var result;
for (i = 0; i < 14; i++) {
   result = "result";
   xclass = document.getElementsByClassName("course_eval_row")[i];
   xclass.style.width = xclass.clientWidth + 70 + "px";
   a = 0;
   b = 0;
   p1 = 0;
   p2 = 0;
for (k = 0; k < document.getElementsByClassName('course_eval_row')[i].length; k++) {
  [a, b] = document.getElementsByClassName('course_eval_cell')[k].innerHTML.split('/');
  p1 += parseInt(a);
  p2 += parseInt(b);
}
result = ((p1 / p2) * 100).toFixed(2);
  xclass.innerHTML += "<div id='extra_Gem' class='course_eval_cell'><strong>" + result + " %</strong></div>";
}
 }

我希望第一个div组的示例1的输出为64.55,但实际输出为NaN

1 个答案:

答案 0 :(得分:0)

在示例HTML中,某些course_eval_cell div是空的。当您获取它们的innerHTML时,它们将是空字符串。

当您对这些空字符串调用split时,结果就是另一个空字符串。

您尝试将该空字符串中的第二个字符分配给b,但是由于空字符串的长度为0,因此它将为undefined

您使用此值parseInt调用undefined,该值始终为NaN。将NaN添加到另一个数字也会得到NaN。实际上,涉及NaN的任何其他算术运算都将导致NaN

toFixed(2)上调用NaN时,将导致字符串"NaN"

一个可能的解决方案是过滤掉空字符串,以便这些值不包括在计算中。您可以尝试以下方法:

var cellValue = document.getElementsByClassName('course_eval_cell')[k];
if (cellValue) {
  [a, b] = cellValue.split('/');
  p1 += parseInt(a);
  p2 += parseInt(b);
}