Why is it that after the range form binds onchange, the first event-triggered assignment succeeds, and then the event-triggered assignment fails?

< div class= "a" >

    <img src=".jpg" alt="JOJO">
</div>
<div class="b">
    <div class="b1">
        <span></span>
        <input type="range" min="0" max="359" step="1" class="b11">
        <input type="checkbox">
    </div>
    <div class="b1">
        <span></span>
        <input type="range" min="0" max="100" step="1" class="b11">
        <input type="checkbox">
    </div>
    <div class="b1">
        <span></span>
        <input type="range" min="0" max="100" step="1" class="b11">
        <input type="checkbox">
    </div>
</div>


<style>
    .a{
        width: 500px;
        height: 500px;
        border: 5px inset -sharpaaa;
        margin: 50px;
        margin-left: 150px;
        position: relative;
        display: inline-block;
    }

    .a>img{
        max-width: 500px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

    .b{
        float: right;
        margin: 50px;
        margin-right: 150px;
    }

    .b1>span{
        display: block;
    }
</style>


<script>
    var pictureNode = document.querySelector(".a").firstElementChild;
    var slideBoxNode = document.querySelectorAll(".b1");

    function bindInput() {
        var i = 0;
        var hueRotate = "hue-rotate(" + document.querySelectorAll(".b11")[0].value + "deg)";
        var saturate = "saturate(" + document.querySelectorAll(".b11")[1].value + "%)";
        var brightness = "brightness(" + document.querySelectorAll(".b11")[2].value + "%)";
        var slideNode = 0;

        for(;i<slideBoxNode.length;iPP){
            slideNode = document.querySelectorAll(".b11")[i];
            slideNode.addEventListener("change", function () {
                return (function () {
                    pictureNode.style.filter = hueRotate + " " + saturate + " " + brightness;
                    console.log(pictureNode.style.filter);
                })(i);
            });
        }
    }
    window.bindInput();
</script>

<div class="a"> <img src=".jpg" alt="JOJO"> </div> <div class="b"> <div class="b1"> <span></span> <input type="range" min="0" max="359" step="1" class="b11" value="0"> <input type="checkbox"> </div> <div class="b1"> <span></span> <input type="range" min="0" max="100" step="1" class="b11" value="100"> <input type="checkbox"> </div> <div class="b1"> <span></span> <input type="range" min="0" max="100" step="1" class="b11" value="100"> <input type="checkbox"> </div> </div> var pictureNode = document.querySelector(".a").firstElementChild; var slideBoxNode = document.querySelectorAll(".b1"); function bindInput() { var i = 0 var blls = document.querySelectorAll(".b11") var hueDom = blls[0] // dom var saturateDom = blls[1] var brightnessDom = blls[2] var slideNode = 0; for(;i<slideBoxNode.length;iPP){ slideNode = document.querySelectorAll(".b11")[i]; slideNode.addEventListener("change", function () { return (function () { var hueRotate = "hue-rotate(" + hueDom.value + "deg)"; // var saturate = "saturate(" + saturateDom.value + "%)"; var brightness = "brightness(" + brightnessDom.value + "%)"; pictureNode.style.filter = hueRotate + " " + saturate + " " + brightness; console.log(pictureNode.style.filter); })(i) }); } } window.bindInput();