为什么range表单绑定onchange后，第一次事件触发赋值成功，随后事件触发赋值失败？

Question

<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 #aaa;
        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;i++){
            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>

Answer 1

<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"><!-- value="0"给色相赋默认值 -->
        <input type="checkbox"> 
    </div>
    <div class="b1">
        <span>饱和度</span>
        <input type="range" min="0" max="100" step="1" class="b11" value="100"><!-- value="100"给饱和度赋默认值 -->
        <input type="checkbox">
    </div>
    <div class="b1">
        <span>亮度</span>
        <input type="range" min="0" max="100" step="1" class="b11" value="100"><!-- 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;i++){
        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();