Only one button in my javascript function when I want two

Question

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.

There are some fundamental issues that you may also want to address: don't put script inline on a page, put it in its own .js file and then load that with <script src="..." async defer></script> so that it loads as soon as possible, but doesn't run until the DOM has been constructed. Also, you only need type for a script element in HTML5 if it's not JavaScript. Code wise, rather than var you really want to be using the modern let and const, both of which obey block scope. And don't use <br>: you already have id attributes: use a css file where you declare the margins for them — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Nov 11, 2020 at 0:14
@Mike'Pomax'Kamermans okay sounds good! I will definitely look into applying them. To be honest, a lot of this style of coding was taught by my teacher and I am just following her teachings. But I will definitely apply what you listed above — Johnny Depp
– Johnny Depp, Commented Nov 11, 2020 at 0:16
(also, rather than the legacy onclick, use normal modern event listening: button.addEventListener("click", ...). If you've been learning from a tutorial, you want to start looking for a more modern tutorial: this code looks very out of date, and is not teaching you best practices. Try looking for something that teaches HTML5 with "ES6" javascript, or a versioned-by-year ES, like ES2016 or ES2020. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Nov 11, 2020 at 0:16

Jan Novak · Accepted Answer · 2020-11-11 00:26:55Z

1

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.

answered Nov 11, 2020 at 0:26

Jan Novak

1811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Johnny Depp Over a year ago

Some heroes don't wear capes. Thank you

Collectives™ on Stack Overflow

Only one button in my javascript function when I want two

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related