CODEWITHSUNDEEP
javascriptloopsfor-loop
Jay
Jay

Reputation: 35

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! :)

Upvotes: 2

Views: 253

Answers (2)

Alex Nikulin
Alex Nikulin

Reputation: 8679

Why not do like this :

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

Upvotes: 3

Craicerjack
Craicerjack

Reputation: 6332

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

Upvotes: 2

Related Questions