2 Replies - 1172 Views - Last Post: 22 January 2013 - 04:24 AM

#1 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Get the values of array on the basis of clicked button

Posted 22 January 2013 - 03:53 AM

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


Is This A Good Question/Topic? 0
  • +

Replies To: Get the values of array on the basis of clicked button

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3715
  • View blog
  • Posts: 5,972
  • Joined: 08-June 10

Re: Get the values of array on the basis of clicked button

Posted 22 January 2013 - 04:12 AM

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.
Was This Post Helpful? 1
  • +
  • -

#3 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Get the values of array on the basis of clicked button

Posted 22 January 2013 - 04:24 AM

View PostAtli, 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 :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1