单击按钮时在 <td> 中显示计算的算术平均值答案

【问题标题】：Show calculated arithmetic mean in <td> when the button is clicked单击按钮时在 <td> 中显示计算的算术平均值
【发布时间】：2019-10-10 13:58:51
【问题描述】：

请帮我完成这个，我无处可去。

what needs to be done final results

我已经在图片中解释了最终目标是什么。这是一个成绩计算器。

有3种等级..它应该计算每个类别的算术平均值和所有等级的算术平均值，无论它们是哪个类别。

计算值应显示在适当的块上，如图所示。

input[type="number"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="number"]:focus{
    outline : none;
}
</style>
<body>
<div id="stranica" style="display: inline-block; position: left;">
<button type="button" onclick="javascript:dodajocenu();"> Add grade</button>
</div>

<div id="desna" style="display: inline-block; position: absolute; text-align: center;">

<button type="button" onclick=""> Calculate </button>
<br><br>
<table border="1">
<tbody>
<tr>
<td style="width:70px; text-align: center;">Written test</td>
<td style="width:70px; text-align: center;">Essay</td>
<td style="width:70px; text-align: center;">Class Activity</td>
</tr>
<tr>
<td style="text-align: center;">&nbsp;</td> <!-- insert arithmetic mean of all Writtentest, inside td-->
<td style="text-align: center;"></td> <!-- insert arithmetic mean of all Essay, inside td-->
<td style="text-align: center;"></td> <!-- insert arithmetic mean of all ClassActivity, inside td-->
</tr>
</tbody>
</table>
<br>
<table border="1">
<tbody>
<tr>
<td style="width:140px; text-align: center;">Arithmetic mean of all grades</td>
</tr>
<tr>
<td style="text-align: center;">&nbsp;</td> <!-- insert arithmetic mean of all numbers-->
</tr>
</tbody>
</table>
</div>

</body>
<script>
var ocena = 0;

var stranica = document.querySelector("#stranica")

function removeElement(obrisi) {
  var dugme = obrisi.target;
  stranica.removeChild(dugme.parentElement)
}

function dodajocenu() {
  ocena++;

  //create textbox
  var input = document.createElement('input');
  input.type = "number";
  input.setAttribute("max",5);
  input.setAttribute("min",1);

  var myParent = document.body;

  //Create array of options to be added
  var array = ["Written test","Essay","Class Activity"];

  //Create and append select list
  var selectList = document.createElement('select');
  selectList.id = "mySelect";
  myParent.appendChild(selectList);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement('option');
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
  }   

  //create remove button
  var remove = document.createElement('button');
  remove.onclick = function(obrisiocenu) {
    removeElement(obrisiocenu);
  }
  remove.setAttribute("type", "dugme");
  remove.innerHTML = "-"; //delete 

  var item = document.createElement('div')
  item.classList.add("item")

  item.appendChild(input);
  item.appendChild(selectList);
  item.appendChild(remove);

  stranica.appendChild(item)
}
</script>```

【问题讨论】：

试试平均计算代码，你能把一些关键词翻译成英文吗？
我更改了一些文字，希望对您有所帮助。
看来你还没有做任何事情来计算平均值。这听起来像是功课，所以请参考你所学的并应用它。当您在该实现中遇到特定问题时，至少显示尝试实现该解决方案的代码。您提供的 JS 代码是关于添加等级的。没有关于均值计算的内容。
不是家庭作业，而是个人项目。我们甚至还没有开始 JS。

标签： javascript jquery html css html-table

【解决方案1】：

var ocena = 0;

function removeElement(obrisi) {
  var dugme = obrisi.target;
  document.getElementById("stranica").removeChild(dugme.parentElement)
}

function dodajocenu() {
  ocena++;

  //create textbox
  var input = document.createElement('input');
  input.type = "number";
  input.setAttribute("max", 5);
  input.setAttribute("min", 1);

  var myParent = document.body;

  //Create array of options to be added
  var array = ["Kontrolni", "Vezbe", "Aktivnost"];

  //Create and append select list
  var selectList = document.createElement('select');
  selectList.id = "mySelect";
  myParent.appendChild(selectList);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement('option');
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
  }

  //create remove button
  var remove = document.createElement('button');
  remove.onclick = function(obrisiocenu) {
    removeElement(obrisiocenu);
  }
  remove.setAttribute("type", "dugme");
  remove.innerHTML = "-"; //delete 

  var item = document.createElement('div')
  item.classList.add("item")

  item.appendChild(input);
  item.appendChild(selectList);
  item.appendChild(remove);

  document.getElementById("stranica").appendChild(item)
}
function calcMean() {

var nameList=document.querySelectorAll('#stranica .item #mySelect');
var inputList=document.querySelectorAll('#stranica .item input');
var kontrolniList = [];
var vezbeList = [];
var aktivnostList = [];
var ocenaList = [];
for(var i=0; i< nameList.length; i++){
    ocenaList.push(parseInt(inputList[i].value));
    if(nameList[i].value=='Kontrolni') {
        kontrolniList.push(parseInt(inputList[i].value));
    }
    else if(nameList[i].value=='Vezbe') {
        vezbeList.push(parseInt(inputList[i].value));
    }
    else if(nameList[i].value=='Aktivnost') {
        aktivnostList.push(parseInt(inputList[i].value));
    }
}
    document.getElementById("kontrolni").innerHTML=avg(kontrolniList);
    document.getElementById("vezbe").innerHTML=avg(vezbeList);
    document.getElementById("aktivnost").innerHTML=avg(aktivnostList);
    document.getElementById("ocena").innerHTML=avg(ocenaList);
}
function avg( arr ) {
var total = 0, i;
    for (i = 0; i < arr.length; i += 1) {
        total += arr[i];
    }
    return total / arr.length;
}

<div id="stranica" style="display: inline-block; position: left;">
  <button type="button" onclick="javascript:dodajocenu();"> Dodaj ocenu</button>
</div>

<div id="desna" style="display: inline-block; position: absolute; text-align: center;">

  <button type="button" onclick="javascript:calcMean();"> Izracunaj prosek</button>
  <br><br>
  <table border="1">
    <tbody>
      <tr>
        <td style="width:70px; text-align: center;">Kontrolni</td>
        <td style="width:70px; text-align: center;">Vezbe</td>
        <td style="width:70px; text-align: center;">Aktivnost</td>
      </tr>
      <tr>
        <td id="kontrolni" style="text-align: center;">&nbsp;</td>
        <td id="vezbe" style="text-align: center;"></td>
        <td id="aktivnost" style="text-align: center;"></td>
      </tr>
    </tbody>
  </table>
  <br>
  <table border="1">
    <tbody>
      <tr>
        <td style="width:140px; text-align: center;">Zakljucna ocena</td>
      </tr>
      <tr>
        <td id="ocena" style="text-align: center;">&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>

希望这会奏效。

【讨论】：