Calculating the total and average of marks using Javascript and HTML-CodePudding

I am new into Javascript btw thus I really hope someone can help me point out my mistake. I have done all the things that the question asked except for the calculation for total and average part. I got it wrong and I dont know what went wrong. Example marks I have keyed in were 1,2,3,4. Supposed to be the total and average should be 10 and 2.5 but it displayed 1234 and 308.5. Here`s what I have tried :

function findTotal() {
  var num1 = document.getElementById("Mark1").value;
  var num2 = document.getElementById("Mark2").value;
  var num3 = document.getElementById("Mark3").value;
  var num4 = document.getElementById("Mark4").value;
  document.getElementById("result").innerHTML = num1   num2   num3   num4;
}

function findAverage() { 
  var num1 = document.getElementById("Mark1").value;
  var num2 = document.getElementById("Mark2").value;
  var num3 = document.getElementById("Mark3").value;
  var num4 = document.getElementById("Mark4").value;
document.getElementById("result").innerHTML = (num1   num2   num3   num4) / 4;
}

<form>
  Mark : <input type="text" id="Mark1" /><br>
  Mark : <input type="text" id="Mark2" /><br>
  Mark : <input type="text" id="Mark3" /><br>
  Mark : <input type="text" id="Mark4" /><br> <br>
  <input type="button" onClick="findTotal()" Value="Find Total" />
  <input type="button" onClick="findAverage()" Value="Find Average" />
</form><br>

Result : <br>
<span id = "result"></span>

CodePudding user response：

Because the value is string "1" "2" "3" "4" = "1234" so you need to convert it to number so you could just add parseFloat();

<!DOCTYPE html>
    <html>
        <head>
            <title>MARK</title>
        </head>
        <body>
          <script src="mark.js"></script>
    <form>
    Mark : <input type="text" id="Mark1" /><br>
    Mark : <input type="text" id="Mark2" /><br>
    Mark : <input type="text" id="Mark3" /><br>
    Mark : <input type="text" id="Mark4" /><br>
    <br>
    <input type="button" onClick="findTotal()" Value="Find Total" />
    <input type="button" onClick="findAverage()" Value="Find Average" />
    </form>
    <br>
    Result : <br>
    <span id = "result"></span>
    
    </body>
    <script>
    

function findTotal()
{
        var num1 =parseFloat( document.getElementById("Mark1").value);
        var num2 =parseFloat( document.getElementById("Mark2").value);
        var num3 =parseFloat( document.getElementById("Mark3").value);
        var num4 =parseFloat( document.getElementById("Mark4").value);
        document.getElementById("result").innerHTML = (num1   num2   num3   num4);
}

function findAverage() 
{ 
        var num1 =parseFloat( document.getElementById("Mark1").value);
        var num2 =parseFloat( document.getElementById("Mark2").value);
        var num3 =parseFloat( document.getElementById("Mark3").value);
        var num4 =parseFloat( document.getElementById("Mark4").value);
document.getElementById("result").innerHTML = (num1   num2   num3   num4) / 4;
}
    </script>
    </html>

CodePudding user response：

you must parseInt the num varibale becausedocument.getElementById("Mark1").value is string. there for example :

var num1 = parseInt(document.getElementById("Mark1").value);