[amit.soni]

hello programmers....
i m going through some issue with these stuff...
please suggest me the proper way..
thanks

suppose we have two arrays

var img1 = ['a','b','c'];
var img2 = ['d','e','f'];

and two buttons and a div in our body tag

<input type="button" class="img1" value="COLLECTION 1" />
<input type="button" class="img2" value="COLLECTION 2" />
<div class="myDiv"></div>

i have two button on page with the class name same as my array object name.
so what i want is when i click on any of these buttons ,, it should grab the class name of the clicked button and
append the value of array with the same name.
for e.g. if you click on input button with the class name of 'img1' it should dislpay the
value of array img1 which is 'a b c'.
hope u understand what i really want..

thanks

heres the fiddle so far Fiddle

This post has been edited by amit.soni: 22 January 2013 - 03:58 AM

[Atli]

Hey.

The first thing you'll want to change there is how you store the arrays. Most importantly, using the global scope to store variables is highly discouraged. It can cause issues that are hard to diagnose, and are best avoided. Even if a piece of code happens not to have to be inside a function, you should still wrap it in an anonymous function, to avoid cluttering the global scope. E.g:

(function() {
    // Your code here.
}());

Second, seeing as how you are planing to access the arrays - using values retrieved from an external source - you may want to set them up as object elements rather than traditional variables. That will allow for simpler dynamic access to them. Something along the lines of:

var lists = {
    "img1" : ['a','b','c'],
    "img2" : ['d','e','f']
};

This will let you access them using the class name as a string, and let you test whether or not they exist first.

if (lists.hasOwnProperty(className)) {
    console.log(lists[className]);
}
else {
    console.log("List: " + className + " does not exist.");
}

In your code you have already managed to attach a single click event callback to both buttons, and to get the class name for the clicked button. Put that together with what I posted above, and you should have a way to do what you are asking for.

[amit.soni]

Atli, on 22 January 2013 - 04:12 AM, said:

Hey.

The first thing you'll want to change there is how you store the arrays. Most importantly, using the global scope to store variables is highly discouraged. It can cause issues that are hard to diagnose, and are best avoided. Even if a piece of code happens not to have to be inside a function, you should still wrap it in an anonymous function, to avoid cluttering the global scope. E.g:

(function() {
    // Your code here.
}());

Second, seeing as how you are planing to access the arrays - using values retrieved from an external source - you may want to set them up as object elements rather than traditional variables. That will allow for simpler dynamic access to them. Something along the lines of:

var lists = {
    "img1" : ['a','b','c'],
    "img2" : ['d','e','f']
};

This will let you access them using the class name as a string, and let you test whether or not they exist first.

if (lists.hasOwnProperty(className)) {
    console.log(lists[className]);
}
else {
    console.log("List: " + className + " does not exist.");
}

In your code you have already managed to attach a single click event callback to both buttons, and to get the class name for the clicked button. Put that together with what I posted above, and you should have a way to do what you are asking for.

hey thanks... its working