Change javascript variable with html button

Question

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.

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
– lupz, Commented Nov 10, 2021 at 9: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
– Julia, Commented Nov 10, 2021 at 9:37
You have to replace id='ins'. Two or more elements must not have the same ID. — user16540390
– user16540390, Commented Nov 10, 2021 at 9:44
You're reading var position = $('#ins').val(); but there is no ID ins in your HTML code. — user16540390
– user16540390, Commented Nov 10, 2021 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
– Julia, Commented Nov 10, 2021 at 10:25

Maik Lowrey · Accepted Answer · 2021-11-10 10:55:51Z

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>

answered Nov 10, 2021 at 10:55

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user16540390 Over a year ago

Why is using onClick() in HTML a bad practice?

Maik Lowrey Over a year ago

@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 ;-)

score 0 · Accepted Answer · 2021-11-10 11:01:34Z

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>

edited Nov 10, 2021 at 11:01

answered Nov 10, 2021 at 10:42

user16540390

3 Comments

Maik Lowrey Over a year ago

Why you bind the click event to the entire document. bad practice!

user16540390 Over a year ago

@MaikLowrey The code in my answer was changed 2 minutes before your comment. The click event is only bound to the table.

Maik Lowrey Over a year ago

now its good ;-)

Collectives™ on Stack Overflow

Change javascript variable with html button

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related