0

I am implementing the IGV genome browser in a website. I would like to link a table with chromosome positions to the genome browser, so when a user clicks to one position, the genome browser changes to that position automatically.

By now, I have the genome browser code in a separate javascript file, which uses the value of the button.

// Construct genome browser
document.addEventListener("DOMContentLoaded", function () {
    // Obtain position
    var position = $('#ins').val();

    // Use the position
    var options = {locus: position, ...};

    var igvDiv = document.getElementById("igvDiv");

    igv.createBrowser(igvDiv, options)
        .then(function (browser) {
            console.log("Created IGV browser");
        })
};

And the table in html with buttons.

<table class='results-table'>
    <tr>
        <th class='text text--bold'>Chromosome</th>
        <th class='text text--bold'>Start</th>
        <th class='text text--bold'>End</th>
        <th class='text text--bold'>Genome Browser</th>
    </tr>
    <tr>
        <td class='text'>chr1</td>
        <td class='text'>0</td>
        <td class='text'>100</td>
        <td><button class='editbtn' value='chr1:0-100' id='ins1'>chr1:0-100</button></td>
    </tr>
    <tr>
        <td class='text'>chr2</td>
        <td class='text'>200</td>
        <td class='text'>400</td>
        <td><button class='editbtn' value='chr2:200-400' id='ins2'>chr2:200-400</button></td>
    </tr>
</table>

With this, the browser gets the first position but it does not change when I click the button. I think I need some kind of onClick() action but I can't figure out how to change a javascript script.

Any help would be appreciated. Thank you!

Júlia

edit: I added more javascript code as I think that I was not able to illustrate my question properly. And also modified the ids from buttons, to make them different.

The question is how to use different ids in javascript depending on the button that was clicked.

Julia
  • 21
  • 1
  • 5
  • HTML element ids should be unique. All your buttons have the same id 'ins'. You can add an event handler for clicks to an element like this `element.addEventListener('click', function(event) { /* your code */ });` – lupz Nov 10 '21 at 09:10
  • Thanks for your comment @lupz but I don't understand how to use the different ids in the javascript. The addEventListener() goes inside the javascript and is used to retrieve the variable? Replacing my line ```var position = $('#ins').val();```? – Julia Nov 10 '21 at 09:37
  • You have to replace `id='ins'`. Two or more elements must not have the same ID. – jabaa Nov 10 '21 at 09:44
  • You're reading `var position = $('#ins').val();` but there is no ID `ins` in your HTML code. – jabaa Nov 10 '21 at 10:20
  • @jabaa thank you for your reply. I understand that I am using #ins instead of #ins1 or #ins2, this is because I want to retrieve the id when the button is clicked, but I don't know how to do that. – Julia Nov 10 '21 at 10:25
  • You added an event listener for the `DOMContentLoaded` event. There is no event listener for the click event. You can access the ID in the event listener. – jabaa Nov 10 '21 at 10:35

2 Answers2

2

You can change some things. I remove the id from your buttons because you will already have the context with the passing event. And instead of a value in the button, I would recommend you to use a data attribute. data-value for example.

function check(e) {
  console.log(e.getAttribute('data-value'))
}
<button class='editbtn' onclick="check(this)" data-value='chr2:200-400' >chr2:200-400</button>
<button class='editbtn' onclick="check(this)" data-value='chr1:0-100' >chr1:0-100</button>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
  • [Why is using onClick() in HTML a bad practice?](https://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice) – jabaa Nov 10 '21 at 10:58
  • @jabaa You are right! And it is no effort to change it. But is also bad practice to bind the click event to the entire documen like you done in your answeart!?!? I think that is really bad ;-) – Maik Lowrey Nov 10 '21 at 11:03
0

You can access the ID and value in a click event:

// Construct genome browser
document.querySelector('table.results-table').addEventListener('click', function ({ target }) {
  if (!target.id) return;
  const id = target.id;
  const position = target.value;
  console.log(id);
  console.log(position);
});
<table class='results-table'>
    <tr>
        <th class='text text--bold'>Chromosome</th>
        <th class='text text--bold'>Start</th>
        <th class='text text--bold'>End</th>
        <th class='text text--bold'>Genome Browser</th>
    </tr>
    <tr>
        <td class='text'>chr1</td>
        <td class='text'>0</td>
        <td class='text'>100</td>
        <td><button class='editbtn' value='chr1:0-100' id='ins1'>chr1:0-100</button></td>
    </tr>
    <tr>
        <td class='text'>chr2</td>
        <td class='text'>200</td>
        <td class='text'>400</td>
        <td><button class='editbtn' value='chr2:200-400' id='ins2'>chr2:200-400</button></td>
    </tr>
</table>
jabaa
  • 5,844
  • 3
  • 9
  • 30