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

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

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>

变量foodarray=[
{
描述：“提拉米苏”，
图像：“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"
},
{
描述：“蓝莓松饼”，
图像：“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（“组件1”）.appendChild（组件1）；
var component2=MakeSliderFW（foodarray）；
document.getElementById（“组件2”）.appendChild（组件2）；

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;

}

函数MakeSliderFW（列表）
{
var slider=document.createElement（“div”）；
对于（变量i=0；i

任何帮助都将不胜感激

这张图片更好地说明了我的问题

通过替换：

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

与：

---

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

您可能还需要解决一些基本问题：不要将脚本内联到页面上，将其放入自己的.js文件中，然后使用

加载它，以便尽快加载，但在构建DOM之前不会运行。此外，如果HTML5中的脚本元素不是JavaScript，则只需输入

type

。代码方面，而不是var您真正想要使用的是现代let和const，两者都服从块范围。不要使用

：您已经有了

id

属性：使用css文件，在其中声明页边距them@Mike“Pomax”Kamerman好的，听起来不错！我一定会考虑应用它们。老实说，我的老师教了很多这种风格的编码，我只是在遵循她的教导。但我肯定会应用上面列出的内容（同时，使用普通的现代事件侦听，而不是传统的

onclick

，即

按钮。addEventListener（“单击”，…）

。如果您一直在从教程中学习，您希望开始寻找更现代的教程：此代码看起来非常过时，并且没有教您最佳实践。请尝试寻找使用“ES6”javascript教授HTML5的内容，或按ES年进行版本调整的内容，如ES2016或ES2020。有些英雄不戴斗篷。谢谢

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