Javascript 在循环中更改函数名

我正试图用一个循环整理一些javascript，但我不确定在循环中更改变量名和函数名的语法。只是适应了过去行之有效的东西，但也许没有像我应该理解的那样理解它

这就是我到目前为止所做的：

var sliderstorage=0;

for (var l = 0; l < ul.children.length; l++)
    {
    var Q = l+1;
    var Num = Q.toString();
    var string = "img" + Num;
    var change = string + "changeftot";

    var [string] = document.getElementById("[string]");
    console.log([string]);

    [string].addEventListener("click",[change]);


        function [change](e)
        {
            sliderstorage = e.target.value;
            console.log(sliderstorage);
            document.form1.Q11.value = sliderstorage;
        }
    };  

var sliderstorage=0；
对于（var l=0；l

这就是我试图实现的目标（此代码def有效）：

我添加了html以使其更清晰

<div id="foo" class="block__list block__list_words" style="height: 100%">

<!--Add images here (change id and value)-->

     <div id="1"><input type="image"  id="img1" value="1" src="<#ImageFolder>\Q8_1.jpg"><br><br></div>

     <div id="2"><input type="image"  id="img2" value="2" src="<#ImageFolder>\Q8_2.jpg"><br><br></div>

    <div id="3"><input type="image"  id="img3" value="3" src="<#ImageFolder>\Q8_3.jpg"><br><br></div>

    <div id="4"><input type="image" id="img4" value="4" src="<#ImageFolder>\Q8_4.jpg"><br><br></div>        
</div>


<script>
// Enable to randomise, comment out to always show in same order

var ul = document.getElementById("foo");
for (var i = ul.children.length; i >= 0; i--)
ul.appendChild(ul.children[Math.random() * i | 0]);

//this is where the code I'm trying to neaten up starts:

var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var img4 = document.getElementById("img4");

var sliderstorage=0;

img1.addEventListener("click",img1changeftot);
img2.addEventListener("click",img2changeftot);
img3.addEventListener("click",img3changeftot);
img4.addEventListener("click",img4changeftot);

    function img1changeftot(e)
    {
        sliderstorage = e.target.value;
        console.log(sliderstorage);
                 document.form1.Q11.value = sliderstorage;
    }

    function img2changeftot(e)
    {
        sliderstorage = e.target.value;
        console.log(sliderstorage);
                document.form1.Q11.value = sliderstorage;
    }

    function img3changeftot(e)
    {
        sliderstorage = e.target.value;
        console.log(sliderstorage);
                document.form1.Q11.value = sliderstorage;
    }

    function img4changeftot(e)
    {
        sliderstorage = e.target.value;
        console.log(sliderstorage);
                document.form1.Q11.value = sliderstorage;
    }     

//启用随机化、注释输出以始终按相同顺序显示
var ul=document.getElementById（“foo”）；
对于（var i=ul.children.length；i>=0；i--）
ul.appendChild（ul.childs[Math.random（）*i|0]）；
//这就是我试图整理的代码的起点：
var img1=document.getElementById（“img1”）；
var img2=document.getElementById（“img2”）；
var img3=document.getElementById（“img3”）；
var img4=document.getElementById（“img4”）；
var sliderstorage=0；
img1.addEventListener（“单击”，img1changeftot）；
img2.addEventListener（“单击”，img2changeftot）；
img3.addEventListener（“单击”，img3changeftot）；
img4.addEventListener（“单击”，img4changeftot）；
功能img1changeftot（e）
{
滑块存储=e.target.value；
控制台日志（滑块存储）；
document.form1.Q11.value=滑块存储；
}
功能img2changeftot（e）
{
滑块存储=e.target.value；
控制台日志（滑块存储）；
document.form1.Q11.value=滑块存储；
}
功能img3changeftot（e）
{
滑块存储=e.target.value；
控制台日志（滑块存储）；
document.form1.Q11.value=滑块存储；
}
功能img4changeftot（e）
{
滑块存储=e.target.value；
控制台日志（滑块存储）；
document.form1.Q11.value=滑块存储；
}     

---

任何帮助和意见，非常感谢！：）

您可以将事件侦听器添加到如下类型的项中。在您的情况下，获取页面上的所有输入。然后检查输入类型是否为image，如果为，则向其添加事件侦听器

var sliderstorage = 0

//create your function outside of the loop 
//so its not recreated in each iteration of the loop
function changeftot(e) {
    sliderstorage = e.target.value;
    console.log(sliderstorage);
    document.form1.Q11.value = sliderstorage;
}

var inputs =document.getElementById('foo').getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'image') {
        inputs[i].addEventListener('click', changeftot)
    }
};

var sliderstorage=0
//在循环之外创建函数
//所以它不会在循环的每次迭代中重新创建
功能更改按钮（e）{
滑块存储=e.target.value；
控制台日志（滑块存储）；
document.form1.Q11.value=滑块存储；
}
var inputs=document.getElementById（'foo'）.getElementsByTagName（'input'）；
对于（变量i=0；i

为什么不这样做：

document.getElementById("foo").addEventListener("click", function(e){
   if(e.target.type=="image") document.form1.Q11.value = e.target.value;
}); 

---

您的函数只对不同的图像执行相同的操作。。。为什么需要多个功能？你不能只用一个吗？实际上你在代码中做什么有点不清楚。这应该是伪代码吗？我有四个图像（但我想这样做，不管有多少图像）。目的是选择最好的图像。单击所选图像时，图像值（1、2、3或4）将写入表单（页面将自动移动到下一个问题）。“这就是我试图实现的”部分显示了我目前拥有的工作代码。它起作用了。它是活跃的。但是我想把它整理一下，这样每次我添加或删除一个图像时，代码就不需要更改了。这有意义吗？：）嘿，我添加了html以使其更清晰。ul是一个var名称。很抱歉造成混淆。不幸的是，页面上还有其他图像。这就是为什么我一直在引用div'foo'的子对象，以便获得这些特定的映像。更新为仅将eventlistener添加到foo的子对象