My text has annotations marked dynamically with spans. By using the 'addClickEvent' function, I'm able to add a click-event to provide users with more information when they click on the annotations. Although I can retrieve all the information in the console after a click, I'm facing difficulty in binding this information with the HTML. Any suggestions or tips would be greatly appreciated.
HTML
<div id="description">
<span class="dictCanon">{{descriptionDictCanon}}</span>
<span class="coveredText">Covered text: {{descriptionCoveredText}}</span>
<span class="sectionHeader">Category</span>
<span class="val">{{descriptionCategory}}</span>
<span class="sectionHeader">Group</span>
<span class="val">{{descriptionGroup}}</span>
<span class="sectionHeader otherSynonyms">Synonyms</span>
<span class="val">{{descriptionSynonyms}}</span>
</div>
JS
addClickEvent (obj) {
var rangyRoot = document.getElementById("rangy");
var elems = rangyRoot.getElementsByClassName('marker');
if (elems.length) {
for (var i = 0, l = elems.length; i < l; i++) {
(function(i) {
elems[i].onclick = function() {
var termToFind = elems[i].innerHTML;
for (var item in obj) {
var str = obj[item].coveredText;
if (str === termToFind) {
let d = obj[item];
this.descriptionDictCanon = d.dictCanon;
this.descriptionCoveredText = d.coveredText;
this.descriptionCategory = d.parentCategory;
this.descriptionGroup = d.parentGroup;
this.descriptionSynonyms = d.otherSynonyms;
};
};
}
})(i);
}
}
}