[英]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.我正在为班级做作业,并尝试使用按钮创建一个 javascript 函数来显示滑块组件上的值。 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演示.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 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.这是一张更好地展示我的问题的图片。
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.您还将在第一张图片下获得 buttonOut。 The problem is with the way you are setting your onclick function inside for loop.问题在于您在 for 循环中设置 onclick 函数的方式。 That way you will always get last loop value inside callback, which is obviously not desired effect.这样你总是会在回调中获得最后一个循环值,这显然不是预期的效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.