我正在網站中實作IGV基因組瀏覽器。我想將帶有染色體位置的表格鏈接到基因組瀏覽器，因此當用戶單擊一個位置時，基因組瀏覽器會自動更改為該位置。
現在，我在一個單獨的 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 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，使它們不同。
The question is how to use different ids in javascript depending on the button that was clicked.
uj5u.com熱心網友回復：
你可以改變一些東西。我從您的按鈕中洗掉了 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>uj5u.com熱心網友回復：
您可以在點擊事件中訪問 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> 轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355103.html
標籤：javascript html variables button
上一篇：使用javascript在html畫布中添加影像不起作用
下一篇：使用其父項獲取子項的xpath