Make a clickable array inside JavaScript

Question

Hey so I have an conundrum that I am trying to resolve.

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.

So basically "User Clicks"

ASDJASDJAKJFSAKDBSKJDBKAJBSDKJFBAKJSBFKJBSKJABFJSABKFAKJBF

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.

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 < lines.length; line++){
               var recordName = lines[line].substr(0, 6);
                var atomName = lines[line].substr(12, 3);
                if (recordName === 'ATOM  ' && atomName === " CA") {
                    var sequenceData = lines[line].substr(17, 3);
                    sequencePDB.push(sequenceDataList[sequenceData]);
                };
            };

            var sequenceLabel = document.getElementById("sequence-label");
            sequenceLabel.innerHTML = sequencePDB.join("");

        };
    };

};

HTML File

       <div id = "sequence-label" class="scrollingDiv"  >
        </div>

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.

Answer 1

Here's how to make each individual sequence clickable using only one event listener:

var sequencePdb = ["want", "these", "to", "be", "clickable"];

// just pretend we got the data from the XHR
(function() {
  var sequenceLabel = document.getElementById("sequence-label");
  
  // wrap each sequence in a span
  sequencePdb.forEach(function(pdb) {
    var span = document.createElement('span');
    
    // use textContent instead of innerHTML to avoid XSS attacks!
    span.textContent = pdb;
    
    sequenceLabel.appendChild(span);
  });
  
  // only need one event listener
  sequenceLabel.addEventListener('click', function(event) {
    // rule out the #sequence-label itself if it was clicked directly
    if (event.target !== this) {
      // event.target is span, textContent is string value
      console.log(event.target.textContent);
    }
  });
}());

<div id="sequence-label" class="scrollingDiv"></div>