Changing function names within a loop

I'm trying to neaten up some javascript with a loop - but am unsure of my syntax for changing variable names and function names within the loop. Just adapting things that have worked in the past, but perhaps not understanding it quite like I should?

This is what I have so far:

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;
        }
    };  

And this is what I'm trying to achieve (this code def works):

I have added the html to make it clearer.

<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;
    }     

Any help and input, greatly appreciated! :)

Answers


Why not do like this :

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

You can add an event listener to a type of item like below. In your case get all the inputs on the page. Then check if that input type is image, if it is add the event listener to it.

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)
    }
};

Need Your Help

PHP header not redirecting when using forms

php forms redirect header

I'm doing form validation using a PHP script. I initially wrote this code in 2007 but now it just stopped working, and I've been trying to figure out why.