Student mark calculator · Version 2

Read → Check → Calculate → Format → Show

Enter five marks. This example assumes each mark is from 0 to 100; the mock paper does not specify that range.

One function. Five familiar steps.

Read five values → check → add and divide → format → show.

The button uses type="button" onclick="processMarks()". This calls the function without submitting the form.

reportValidity() asks the browser to check the number fields and the example's 0–100 limits. parseFloat() converts text to numbers; it is not a complete validation check.

Download the simple JavaScript

Read the complete function

function processMarks() {
    // 1. Read marks
    let val1 = document.getElementById('m1').value;
    let val2 = document.getElementById('m2').value;
    let val3 = document.getElementById('m3').value;
    let val4 = document.getElementById('m4').value;
    let val5 = document.getElementById('m5').value;

    // 2. Stop if any field is empty
    if (val1 === "" || val2 === "" || val3 === "" || val4 === "" || val5 === "") {
        alert("Please enter a valid number in all five fields.");
        return;
    }

    // Let the browser check the number inputs and their min/max limits.
    if (!document.getElementById('markForm').reportValidity()) {
        return;
    }

    // 3. Convert to numbers, add, and divide by five
    let total = parseFloat(val1) + parseFloat(val2) + parseFloat(val3)
              + parseFloat(val4) + parseFloat(val5);
    let avg = total / 5;

    // 4. Fill the modal and format the average
    document.getElementById('totalDisplay').innerText = total;
    document.getElementById('avgDisplay').innerText = avg.toFixed(2);

    // 5. Show the modal
    let modalInstance = new bootstrap.Modal(document.getElementById('resultModal'));
    modalInstance.show();
}