个人中心
gpt4 book ai didi

javascript - 单击按钮时在 中显示计算的算术平均值

转载 作者：行者123 更新时间：2023-11-28 16:52:47 28 4
gpt4 key购买 nike

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

what needs to be done final results

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

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

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

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>```

最佳答案 

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>

希望这会奏效。

关于javascript - 单击按钮时在 <td> 中显示计算的算术平均值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58315454/

28 4 0
文章推荐： css - 如何定位 CSS :last-of-type of consecutive elements (not ALL within a parent element)
文章推荐： javascript - 似乎无法理解为什么我的背景图像轮播不起作用？
文章推荐： python - 我没有在 PyQt 中使用 QPixmap。但我得到 QPixmap : It is not safe to use pixmaps outside the GUI thread in PyQt
文章推荐： css - 具有动态高度和页脚的模态窗口
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com