title: JavaScript Retrieving the unique 'id' of div elements with just a class?
body: <p>When making a JavaScript script to iterate through a set of elements with the same class name, you can alter each of their properties individually. </p>
  
  <p>How does the script know which element to edit if they don't have unique IDs? If they do in fact have unique ID's, how do you retrieve them? Using <code>alert();</code> to display what is held in the node array from a simple <code>document.getElementsByClassName('');</code> seems to display the type of element. </p>
  
  <p>Could I actually store these results in an array for later use? </p>
  
  <p>If on the documents load, I fetch an array of elements with a certain class name:</p>
  
  <pre><code>&lt;script&gt;
  
  var buttonArray = document.getElementsByClassName('button');
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Then iterate through this, and add the result at 'r' position to an object:</p>
  
  <pre><code>&lt;script&gt;
  
  var buttonArray = document.getElementsByClassName('button');
  var buttonObject = {};
  
  for(r=0;r&lt;buttonArray.length;r+=1)
  {
       buttonObject[buttonArray[r]] = [r*5,r*5,r*5];
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Would I be able to find the array for each individual element with classname 'button' like so:</p>
  
  <pre><code>&lt;script&gt;
  
  var buttonArray = document.getElementsByClassName('button');
  var buttonObject = {};
  
  function changeCol(buttonID)
  {
       var red = buttonObject[buttonID][0];
       var green = buttonObject[buttonID][1];
       var green = buttonObject[buttonID][2];
       buttonID.style.backgroundColor = "rgb("+red+","+green+","+blue+")";
  }
  
  for(r=0;r&lt;buttonArray.length;r+=1)
  {
       buttonObject[buttonArray[r]] = [r*5,r*5,r*5];
       buttonArray[r].onclick = function(){ changeCol(this); };
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I thought the <code>this</code> part of <code>onclick = function(){ changeCol(this); };</code> would hold the same unique ID as I stored in the buttonObject object, as the variable name that held the array?</p>
  
  <p>Should this work? I can't seem to get it to on my web page, so instead, I used the buttons innerHTML in the buttonObject as the variable name that held the array for that object. The problem with that, is that I will probably need two or more buttons to have the same innerHTML.</p>
  
  <p>Here's the webpage as it currently is: 
  <a href="http://www.shadespeed.com" rel="nofollow">http://www.shadespeed.com</a></p>
  
  <p>I need to re-make the script to allow buttons to have the same name.</p>
  
  <p>Any tips / advice would be greatly appreciated.</p>
  
  <p>Many thanks!</p>
  
  <p>- Dan. :)</p>