Сделать интерактивный массив внутри JavaScript

Question

Эй, у меня есть загадка, которую я пытаюсь решить.

У меня есть файл PDB (файл типа белка), где я загружаю данные. Я хватаю последовательность белка, а затем заполняю файл div последовательностью, когда пользователь нажимает кнопку.

Так в основном "пользователь щелкает"

ASDJASDJAKJFSAKDBSKJDBKAJBSDKJFBAKJSBFKJBSKJABFJSABKFAKJBF 

И последовательность показывает вверх. То, что я хочу, чтобы пользователь делал, - это когда пользователь нажимает элемент внутри этой последовательности, он будет соответствующим образом прорисовывать белок. Проблема, с которой я столкнулась, - сделать массив доступным и попытаться понять, как это сделать.

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 файл

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

До сих пор я пытался сделать каждый элемент массива интерактивного элементом путем добавления слушателя событий, но это не показывать мои предупредительные сообщения. Поэтому мне было интересно, есть ли способ сделать это возможным. Я думаю, что innerHTML преобразует его в строку, поэтому, когда он читает его, он не захватывает элементы внутри массива. Так вот где я застрял.

Answer 1

Вот как сделать каждую отдельную последовательность кликабельным, используя только один слушатель событий:

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>