The Average Keeps on outputting NaN if there is only single input

Question

This is the input form where I can input the value to compute the average. The problem is when I input on Q1 and leave the E2 and T3 blank, it output a NaN. what i want to achieve is that, if there is only 1 input, it will go to the average directly to output the value of it.

            <div class="col-md-0"></div>
                <div class="col-md-12 well">
                    <div class="col-md-5">
                        <div class="form-group">
                            <label>Quality (Q1)</label>
                            <input type="number" min="0" max="5" id="Quality" onkeyup="getAverage();" class="form-control" maxlength="5" />
                        </div>
                        <div class="form-group">
                            <label>Efficiency (E2)</label>
                            <input type="number" min="0" max="5" id="Efficiency" onkeyup="getAverage();" class="form-control" maxlength="5" />
                        </div>
                        <div class="form-group">
                            <label>Timeliness (T3)</label>
                            <input type="number" min="0" max="5" id="Timeliness" onkeyup="getAverage();" class="form-control" maxlength="5"/>
                        </div>
                        <div class="form-group">
                            <label>Average (A4)</label>
                            <input type="text" class="form-control" id="Average" readonly="readonly"/>
                        </div>
                    </div>
                </div>

And this is the Javascript function that I have created

function getAverage(){
            var Q1=document.getElementById('Quality').value;
            var E2=document.getElementById('Efficiency').value;
            var T3=document.getElementById('Timeliness').value;
            var total;
            var ave;
            
            if(Q1 =="" || Q1 == 0) { //checked
                total = parseInt(E2)+parseInt(T3);
                ave = total/2;

                document.getElementById('Average').value=ave.toFixed(2);
            } else if(E2 =="" || E2 == 0) { //checked
                total = parseInt(Q1)+parseInt(T3);
                ave = total/2;

                document.getElementById('Average').value=ave.toFixed(2);
            } else if(T3 =="" || T3 == 0){ //checked
                total = parseInt(Q1)+parseInt(E2);
                ave = total/2;

                document.getElementById('Average').value=ave.toFixed(2);
            } else if(E2 == "" || E2 == 0 && T3 == "" || T3 == 0) {
                ave = Q1;
                
                document.getElementById('Average').value=ave.toFixed(0);
            } else if(Q1 == "" || Q1 == 0 && T3 == "" || T3 == 0) {
                ave = E2;

                document.getElementById('Average').value=ave.toFixed(0);
            } else if(Q1 == "" || Q1 == 0 && E2 == "" || E2 == 0) {
                ave = T3;

                document.getElementById('Average').value=ave.toFixed(0);
            } else { //checked
                total = parseInt(Q1)+parseInt(E2)+parseInt(T3);
                ave = total/3;

                document.getElementById('Average').value=ave.toFixed(2);
            }
        }

the one that doesn't have //checked is the one that return NaN.

Here is the ouput

Answer 1

I have changed the conditions from the ones you are using and also, as I was having a problem with toFixed() I removed that. The code snippet below does seem to work so I think it may be helpful in working out exactly what is going on.

function getAverage(){
            var Q1=document.getElementById('Quality').value;
            var E2=document.getElementById('Efficiency').value;
            var T3=document.getElementById('Timeliness').value;
            var total;
            var ave;
            
            if(!Q1 && E2 && T3) { //checked
                total = parseInt(E2)+parseInt(T3);
                ave = total/2;

                document.getElementById('Average').value=ave;
            } else if(Q1 && !E2 && T3) { //checked
                total = parseInt(Q1)+parseInt(T3);
                ave = total/2;

                document.getElementById('Average').value=ave;
            } else if(Q1 && !T3 && E2){ //checked
                total = parseInt(Q1)+parseInt(E2);
                ave = total/2;

                document.getElementById('Average').value=ave;
            } else if(Q1 && !E2 && !T3) {
                ave = Q1;
                
                document.getElementById('Average').value=ave;
            } else if(!Q1 && !T3 && E2) {
                ave = E2;

                document.getElementById('Average').value=ave;
            } else if(!Q1 && !E2 && T3) {
                ave = T3;

                document.getElementById('Average').value=ave;
            } else { //checked
                total = parseInt(Q1)+parseInt(E2)+parseInt(T3);
                ave = total/3;

                document.getElementById('Average').value=ave;
            }
        }

<div class="col-md-0"></div>
                <div class="col-md-12 well">
                    <div class="col-md-5">
                        <div class="form-group">
                            <label>Quality (Q1)</label>
                            <input type="number" min="0" max="5" id="Quality" onkeyup="getAverage();" class="form-control" maxlength="5" />
                        </div>
                        <div class="form-group">
                            <label>Efficiency (E2)</label>
                            <input type="number" min="0" max="5" id="Efficiency" onkeyup="getAverage();" class="form-control" maxlength="5" />
                        </div>
                        <div class="form-group">
                            <label>Timeliness (T3)</label>
                            <input type="number" min="0" max="5" id="Timeliness" onkeyup="getAverage();" class="form-control" maxlength="5"/>
                        </div>
                        <div class="form-group">
                            <label>Average (A4)</label>
                            <input type="text" class="form-control" id="Average" readonly="readonly"/>
                        </div>
                    </div>
                </div>