Показывать рассчитанное среднее арифметическое в <td>при нажатии кнопки - PullRequest
Новая
       10

Показывать рассчитанное среднее арифметическое в <td>при нажатии кнопки

0 голосов
/ 10 октября 2019

, пожалуйста, помогите мне закончить это, я ничего не получаю.

что нужно сделать окончательные результаты

Я объяснилна фотографиях какова цель финиша. Это калькулятор оценок.

Существует 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>```

1 Ответ

1 голос
/ 10 октября 2019 

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>

Надеюсь, это сработает.

...