Change javascript variable with html button-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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>