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.

Wrap sequencePDB.join(""); in span/div/p and assign click event on them! — Rayon
– Rayon, Commented Jun 13, 2016 at 17:47
Hey @Rayon can you show me how the span element would enable me to get each element inside the array? — Suliman Sharif
– Suliman Sharif, Commented Jun 13, 2016 at 17:54
sequenceLabel.innerHTML = '<span>' + sequencePDB.join("</span><span>") + '</span>'; and to assign event, $('#sequence-label').on('click', 'span', function(){ alert(this.textContent) }) — Rayon
– Rayon, Commented Jun 13, 2016 at 18:03

Patrick Roberts · Accepted Answer · 2016-06-13 17:59:59Z

2

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>

answered Jun 13, 2016 at 17:59

Patrick Roberts

52.4k10 gold badges120 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suliman Sharif Over a year ago

Thanks, that helps a lot. About the XSS attacks, the use of textContent just parses it as text and not code so it never executes?

Patrick Roberts Over a year ago

@SulimanSharif correct. A common pitfall is when the remote text contains scripts tags. Injecting them via innerHTML will execute them in the page, giving access to cookies, localStorage data, tokens stored in the DOM, etc.

Collectives™ on Stack Overflow

Make a clickable array inside JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related