使用 html 按钮更改 javascript 变量

Question

我正在网站中实施 IGV 基因组浏览器。我想 link 一个带有染色体位置的 table 到基因组浏览器，所以当用户点击一个位置时，基因组浏览器会自动更改到那个位置。

现在，我将基因组浏览器代码放在一个单独的 javascript 文件中，该文件使用按钮的值。

// 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");
        })
};

以及 html 中带有按钮的 table。

<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>

有了这个，浏览器获得了第一个位置，但是当我点击按钮时它并没有改变。我想我需要某种 onClick() 操作，但我不知道如何更改 javascript 脚本。

如有任何帮助，我们将不胜感激。谢谢！

朱莉娅

编辑：我添加了更多 javascript 代码，因为我认为我无法正确说明我的问题。并且还修改了按钮的 id，使它们不同。

问题是如何根据单击的按钮在 javascript 中使用不同的 ID。

Answer 1

您可以在点击事件中访问 ID 和值：

// 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>

Answer 2

您可以更改一些内容。我从你的按钮中删除了 id，因为你已经有了传递事件的上下文。而不是按钮中的值，我建议您使用数据属性。例如数据值。

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>

使用 html 按钮更改 javascript 变量

Change javascript variable with html button

html

javascript

variables

button