title: Make a clickable array inside JavaScript
body: <p>Hey so I have an conundrum that I am trying to resolve.</p>
  
  <p>So I have a  PDB (protein type file) file where I am loading data. I am grabbing the sequence of the protein and then populating a div file with the sequence when the user clicks the button. </p>
  
  <p>So basically "User Clicks"</p>
  
  <pre><code>ASDJASDJAKJFSAKDBSKJDBKAJBSDKJFBAKJSBFKJBSKJABFJSABKFAKJBF
  </code></pre>
  
  <p>And the sequence shows up. What I want the user to do is when the user clicks an element inside this sequence it will hightlight the protein accordingly. The trouble I am having is making the array clickable and trying to figure how to do that. </p>
  
  <pre><code>var sequencePdb = [];
  document.getElementById("sequence-label").style.visibility = 'visible';
  var f = "";
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", urlPdb, true);
  rawFile.onreadystatechange = function () {
  
      if(rawFile.readyState === 4) {
          if(rawFile.status === 200 || rawFile.status == 0) {
              f = rawFile.responseText;
              var lines = f.split('\n');
  
              for (var line = 0; line &lt; lines.length; line++){
                 var recordName = lines[line].substr(0, 6);
                  var atomName = lines[line].substr(12, 3);
                  if (recordName === 'ATOM  ' &amp;&amp; atomName === " CA") {
                      var sequenceData = lines[line].substr(17, 3);
                      sequencePDB.push(sequenceDataList[sequenceData]);
                  };
              };
  
              var sequenceLabel = document.getElementById("sequence-label");
              sequenceLabel.innerHTML = sequencePDB.join("");
  
          };
      };
  
  };
  </code></pre>
  
  <p>HTML File</p>
  
  <pre><code>       &lt;div id = "sequence-label" class="scrollingDiv"  &gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>So far I have tried making each element in an array a clickable item by adding an event listener but it didn't show my alert messages. So I was wondering if there was a way to make this possible. I think the innerHTML converts it into a string so when it reads it, it doesn't pick up the elements inside the array. So that's where I am stuck.</p>