javascript - 每次输入新行js后的平均工资

Question

我需要制作在每次输入新行后计算平均工资的函数。这就是我的代码的样子

function addNew() {

  let salary = prompt("What is your salary?");
  element.innerHTML += `<li> 
    <span class = "employeeSalary"> ${salary}</span>
  </li>`
}

我必须使用纯js。这是我开始的地方，但我真的不知道如何做到这一点

function countAvgSal() {
  const num = document.getElementsByClassName("employeeSalary");
} 

countAvgSal();

function writeSal() {
    const docavg = document.getElementById('docAvgSal');
    docavg.innerHTML = `The average salary is ${countAvgSal()}`
}

Answer 1

要计算平均值，您可以使用 .reduce()方法。

但首先你需要拿到所有的工资。 .getElementsByClassName 返回 HTMLCollection 。要将其转换为数字列表，您可以使用 spread syntax :

const salaries = [...document.getElementsByClassName("employeeSalary")];

然后map将此数组转换为数字数组:

salaries.map(e => parseFloat(e.innerHTML))

最后使用.reduce()计算平均值:

.reduce((sum, cur) => sum += cur) / salaries.length;

function addNew() {
  const element = document.getElementById('salaries');
  let salary = prompt("What is your salary?");
  element.innerHTML += `<li> 
    <span class = "employeeSalary"> ${salary}</span>
  </li>`;
  writeSal();
}

function countAvgSal(){
  const salaries = [...document.getElementsByClassName("employeeSalary")];
  return !salaries.length ? 0 : salaries.map(e => parseFloat(e.innerHTML))
    .reduce((sum, cur) => sum += cur) / salaries.length;
} 

function writeSal(){
    const docavg = document.getElementById('docAvgSal');
    docavg.innerHTML = `The average salary is ${countAvgSal()}`
}

<button onclick="addNew()">Add</button>
<ul id="salaries"></ul>
<div id="docAvgSal"></div>