Only one button in my javascript function when I want two

I am doing an assignment for class and attempting to make a javascript function with a button to show the value on a slider component. However, the function only shows one button when there should be two. I am passing two values in my array. I can’t find the error. Any help would do.

DEMO.html

<div class="slidercomponent" id ="component1"></div> <br/><br/><br/><br/>
        <div class="slidercomponent" id ="component2"></div>


        <script type="text/javascript">

            var foodarray = [
                {
                    caption: "Tiramisu",
                    image: "https://food.fnr.sndimg.com/content/dam/images/food/fullset/2011/2/4/2/RX-FNM_030111-Sugar-Fix-005_s4x3.jpg.rend.hgtvcom.826.620.suffix/1371597326801.jpeg"
                },
                {
                    caption: "Blueberry Muffin",
                    image: "https://tmbidigitalassetsazure.blob.core.windows.net/rms3-prod/attachments/37/1200x1200/Wild-Blueberry-Muffins_EXPS_FTTMZ19_787_B03_05_7b_rms.jpg"
                }
            ];
            
            var component1 = MakeSliderFW(foodarray);
            document.getElementById("component1").appendChild(component1);
            var component2 = MakeSliderFW(foodarray);
            document.getElementById("component2").appendChild(component2);
        </script>

MakeSliderFW.js

function MakeSliderFW(list)
{
   
    var slider = document.createElement("div");

    for (var i = 0; i < list.length; i++) {
        var sliderElement = document.createElement("div");
        slider.appendChild(sliderElement);

        var container = document.createElement("div");
        container.classList.add("container");
        sliderElement.appendChild(container);
        
        var image = document.createElement("img");
        image.classList.add("resize");
        image.classList.add("image");
        image.src = list[i].image;
        container.appendChild(image);
        
        
        var overlay = document.createElement("div");
        var text = document.createElement("div");
        container.appendChild(overlay);

        var slidecontainer = document.createElement("div");
        slidecontainer.classList.add("slidecontainer");
        sliderElement.appendChild(slidecontainer);
        
        var input = document.createElement("input");
        var range;
        var rangee;
        input.type = "range";
        input.min = "1";
        input.max = "100";
        input.value = "50";
        input.classList.add("slider");
        
          input.oninput = function () {
           console.log("range = " + input.value);
           rangee = input.value;
        };

        input.onchange = function () {
           range = this.value;
           console.log("onchange =" + range);
        };
        
        slidecontainer.appendChild(input);

        
        var button = document.createElement("button");
        button.innerHTML = "Value";
        sliderElement.appendChild(button);
        
        var buttonOut = document.createElement("p");
        sliderElement.appendChild(buttonOut);

        button.onclick = function ()
        {
        
                    buttonOut.innerHTML = input.value;
                    console.log("buttonOut= " + buttonOut);
            
        };
        sliderElement.appendChild(buttonOut);
    }
    return slider;

}

Any help would be appreciated.

Here is an image better demonstrating my issue.

Answer

By replacing:

button.onclick = function ()
    {
    
                buttonOut.innerHTML = input.value;
                console.log("buttonOut= " + buttonOut);
        
    };

with:

button.onclick = function (input, buttonOut) {
                    return function() {
                        buttonOut.innerHTML = input.value;
                    }
                 }(input, buttonOut);

you will also get buttonOut under first picture. The problem is with the way you are setting your onclick function inside for loop. That way you will always get last loop value inside callback, which is obviously not desired effect.

Advertisement

Answer