html output based on two other output

Question

the strength will be determined by (=g) and soil type.

my current code:

<label>
                    SPT Blow Count:
                </label>
                <br>
                <input type="text" id="spt1" name="spt" min="0" placeholder="a" required=""/>
                
                <input type="text" id="spt2" name="spt" min="0" placeholder="b" required=""/>
                
                <input onblur="findTotal()" type="text" id="spt3" name="spt" min="0" placeholder="c" required=""/>
                
                <input onblur="findTotal()" type="text" id="spt4" name="spt" min="0" placeholder="d" required=""/>
                
                <input onblur="findTotal()" type="text" id="spt5" name="spt" min="0" placeholder="e" required=""/>
                
                <input onblur="findTotal()" type="text" id="spt6" name="spt" min="0" placeholder="f" required=""/>
                <br>
                =
                <br>
                <input type="text" id="nvalue" name="nvalue" min="0" max="50 "placeholder="g" required=""/>
                <br>
            
            <script type="text/javascript">
                function findTotal(){
                    var arr = document.getElementsByName('spt');
                    var tot=0;
                    for(var i=2;i<arr.length;i++){
                        if(parseInt(arr[i].value))
                            tot += parseInt(arr[i].value);
                    }
                    document.getElementById('nvalue').value = tot;
                }
            </script>

<p id="soil_strength"></p>
                    <input type="text" id="" name="" placeholder="Strength"/>
                    <select name="soil_type" id="soil_type">
                        <option value="" disabled selected hidden>Type</option>
                        <option value="">CLAY</option>
                        <option value="">SILT</option>
                        <option value="">SAND</option>
                        <option value="">GRAVEL</option>
                    </select>

soil type: Clay/Silt - Cohesive

Sand Gravel - Non-Cohesive

desired outcome example:

If soil type is cohesive and g >=30, then the strength will display HARD If soil type is non-cohesive and g >=50, then strength will be very dense

Answer 1

In your findTotal function, you are looping over an array starting at index 2. The problem is that in your example code, you only have two elements with a name of "spt". This means the array length is 2. Therefore you are skipping all the elements of the array.

You need to set the initializing variable ( i ) to zero, because currently you are starting the loop at the end of the array.

The fix would be:

for(var i=0;i<arr.length;i++){

Read more about for loops in JavaScript here (especially understand what each expression in a for loop does): https://www.w3schools.com/js/js_loop_for.asp