在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>