JSFiddle - React, Tailwind, and code Playground

by puuga

HTML

<html>
<body>
    <div>
        Calculate the average of eight numbers<br />
        Number list.
    </div>
    <div id="op">
        <button onclick="operation()">Operation</button>
    </div>
    <div id="inputList"></div>
    <div id="result"></div>
</body>
</html>

CSS

#inputList{
    font-size:120%;
}

#result {
    font-size:120%;
}

JavaScript

// init variable i, sum
var i = 0; // check intput order
var sum = 0; // store summary

/* function operation to check i < 8
if true get input number then add to sum and incress i
false print avarage of sum
*/
function operation() {
    while( i<8 ) {
        // reset output
        if(i==0) {
            document.getElementById('inputList').innerHTML = "";
            document.getElementById('result').innerHTML = "";
            sum = 0;
        }
        
        // prompt for input number
        var input = prompt("Please enter Number "+(i+1)+" of 8", "0");
        
        // check input must be digit
        // don't work! Why?
        /*
        try {
            parseInt(input);
        } catch (err) {
            alert(input +" is not digit.");
            return;
        }
        // parseInt() in java script never error just return NaN
        */
        
        // work!
        if(isNaN(parseInt(input))) {
            alert(input + " is not digit");
            continue;
        }
        
        // add input to sum
        var tempInput = parseInt(input)
        sum += tempInput ;
        
        // incressment i
        i++;
        
        // display what just input
        var temp = document.getElementById('inputList').innerHTML;
        temp += "input["+(i)+"] = " + tempInput + "<br />";
        document.getElementById('inputList').innerHTML = temp;
    }
    var avg = sum / 8;
        
    // check something
    //alert("avg= "+avg);
    //document.getElementById('result').innerHTML = "sum="+sum+", avg="+avg;
        
    // show avarage result by innerHTML
    document.getElementById('result').innerHTML = "Avarage = "+avg;
    i = 0;
    
}