I am trying to get the average of the numbers in an array in javascript but it's not working ho-CodePudding

My code:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <form onsubmit="return false">
      <label for="sub">Subjects</label>
      <input type="number" id="eh" /><br /><br />
      <label for="sub1">Subject 1 marks:</label><br />
      <input type="number" name="num" id="num1" /><br />
      <label for="sub2">Subject 2 marks:</label><br />
      <input type="number" name="num" id="num2" /><br />
      <label for="sub3">Subject 3 marks:</label><br />
      <input type="number" name="num" id="num3" /><br />
      <label for="sub4">Subject 4 marks:</label><br />
      <input type="number" name="num" id="num4" /><br />
      <label for="sub5">Subject 5 marks:</label><br />
      <input type="number" name="num" id="num5" /><br />
      <input type="submit" value="Submit" onclick="he()" />
    </form>
    <p id="demo"></p>
    <script src="script.js"></script>
  </body>
</html>

Js:

function he() {
    var subcount = document.getElementById("eh").value;
    var marks1 = document.getElementById("num1").value;
    var marks2 = document.getElementById("num2").value;
    var marks3 = document.getElementById("num3").value;
    var marks4 = document.getElementById("num4").value;
    var marks5 = document.getElementById("num5").value;

    var marks =  []

    marks.push(marks1)
    marks.push(marks2)
    marks.push(marks3)
    marks.push(marks4)
    marks.push(marks5)

    const sum = marks.reduce((partialSum, a) => partialSum   a, 0);

    document.getElementById("demo").textContent = sum / subcount

    // console.log(marks)

}

The answer is supposed to be 100

I want the result to be the 500 / 5 But it isn't working. Pls, help me fix this and explain the problem. I don't think there's something wrong with my code or if there is pls tell me what it is.

CodePudding user response：

You can get the average like this:

const marks = [100, 100, 100, 100, 100]
const average = marks.reduce((a, b) => a   b) / marks.length
console.log(`Average: ${average}`)

CodePudding user response：

// Please use the Number() function

const sum = marks.reduce((partialSum, a) => Number(partialSum)   Number(a),0)
    document.getElementById("demo").textContent = sum / Number(subcount)

CodePudding user response：

Because document.getElementById("num1").value got a string, not a number, In JavaScript, the operator is used for both numeric addition and string concatenation. When you "add" a number to a string the interpreter converts your number to a string and concatenates both together. you should handle marks like this:

...
marks = marks.map(i => Number(i))

const sum = marks.reduce((partialSum, a) => partialSum   a, 0);

You can get the example in jsbin, https://jsbin.com/gavutah/edit?html,js,console,output