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>