Why first onchange javascript function works, but not the next.

See more:

Javascript

I need to implement form validation for an online database of water wells. Part of the form relevant to my problem are two input type text elements. I attach onchange event handler and bind them to my script section at the bottom of the page just before the closing body tag.

input boxes:

<pre></div>
                                        <div class="form-group">
                                        <label for="hole_diam_mm" >Hole diameter (mm)</label>
                                            <input type="text" name="hole_diam_mm" id="hole_diam_mm" tabindex="4" class="form-control" placeholder="Hole diameter (mm)" 
                                            value=""  >
                                        </div>
                                        <div class="form-group">
                                        <label for="casing_diam_mm" >Casing diameter (mm)</label>
                                            <input onchange=casing_val() type="text" name="casing_diam_mm" id="casing_diam_mm" tabindex="4" class="form-control" placeholder="Casing diameter (mm)" 
                                            value=""  >
                                        </div>
                                        <div class="form-group">
                                        <label for="screen1_top_dbg" >Top of first screen</label>
                                            <input type="text" name="screen1_top_dbg" id="screen1_top_dbg" tabindex="5" class="form-control" placeholder="Top of first screen" 
                                            value = "" >
                                        </div>
                                        <div class="form-group">
                                        <label for="screen1_bot_dbg" >Bottom of first screen</label>
                                            <input onchange=firstscreen_val() type="text" name="screen1_bot_dbg" id="screen1_bot_dbg" tabindex="6" class="form-control" placeholder="Bottom of first screen" 
                                            value = "" >
                                        </div>

What I have tried:

Here is my javascript code. The first function works as expected, but there's no response to the second one.

<pre><script type="text/javascript">
            function casing_val() {
             //Set the element variables
            let xElement = document.getElementById("casing_diam_mm");
            let yElement = document.getElementById("hole_diam_mm");
            let x = parseFloat(xElement.value); // parseFloat converts string to floating number
            let y =  parseFloat(yElement.value);

            if (x > y) {
                xElement.value = ""; // use the element variable to set the value
               alert("casing diameter must be less than hole diameter. Try again.");
            }
            }
            
                        function firstscreen_val() {
                let st1Element = document.getElementById("screen1_top_dbg"); 
                let sb1Element = document.getElementById("screen1_bot_dbg");
                let zElement = document.getElementById("depth_dbg");
                let st1 = parsefloat(st1Element.value);
                let sb1 = parsefloat(sb1Element.value);
                let z = parsefloat(zElement.value);
            if (st1 > sb1) {
                sb1Element.value ="";
                alert("Bottom of screen must be lower than the top. Try again.");
                        }
                
            }     
            
                     
        </script>

It must be something simple, but I can't figure it out.