javascript - 当我想要两个时，我的 javascript 函数中只有一个按钮

问题描述

我正在为类做作业，并试图用一个按钮制作一个 javascript 函数来显示滑块组件上的值。但是，该功能仅在应该有两个按钮时才显示一个按钮。我在我的数组中传递两个值。我找不到错误。任何帮助都可以。

演示.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;

}

任何帮助，将不胜感激。

这是一张更好地展示我的问题的图片。

标签： javascripthtmlarraysbutton

通过替换：

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

和：

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

您还将在第一张图片下获得 buttonOut。问题在于您在 for 循环中设置 onclick 函数的方式。这样，您将始终在回调中获得最后一个循环值，这显然不是预期的效果。

javascript - 当我想要两个时，我的 javascript 函数中只有一个按钮

问题描述

解决方案

推荐阅读