如何獲取JavaScript中動態生成的按鈕的內部文本？

Question

我試圖獲取單擊按鈕時在頁面上生成的按鈕的文本。 這些按鈕在文檔片段中生成，然后附加到DOM。 我已經編寫了一個獲取文本的功能，但是當我單擊一個按鈕時，沒有任何內容記錄到控制台。 到目前為止，這是我寫的內容：

 // get the text of any button clicked function get_text() { var buttons = document.getElementsByTagName('button'); buttons.onclick = function () { console.log('Button ' + this.innerText + ' clicked'); } } // ends get_text function get_text(); document.addEventListener('DOMContentLoaded', function(event) { var page_title = document.getElementById('res_number'); page_title.innerHTML = 'Data'; var keys = Object.keys(res_cap); var length = keys.length; var docFrag = document.createDocumentFragment(); for (var i = 0; i < keys.length; i++) { var button = document.createElement('button'); button.setAttribute('value', keys[i]); button.innerText = keys[i]; docFrag.appendChild(button); } document.getElementById('main').appendChild(docFrag); }); // ends domcontentloaded event listener var res_cap = { 1264 : 500000, 13151 : 1710189, 13154 : 5098599, 20813 : 1009625, 20814 : 840000, 200814 : 1056231, 200815 : 912510, 22033 : 1069687, 24140 : 524500, 25191 : 125905, 27916 : 998033, 28150 : 307523, 31901 : 77112, 31902 : 77112, 32939 : 5028131, 33710 : 557152, 33930 : 928917, 43210 : 547733, 43610 : 561586, 43626 : 7000, 51770 : 250000, 51771 : 1100000, 51772 : 1021416, 52698 : 1018576, 53116 : 782764, 62310 : 556293, 62518 : 272600, 63210 : 590902, }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../css/styles.css"> </head> <body> <div id='main'> <h1 id='res_number'></h1> <table id='res_table'> <thead> <tr> <th id='table_header' colspan='3'>Title</th> </tr> <tr> <th>C1</th> <th>C2</th> <th>C3</th> </tr> </thead> <tbody> </tbody> </table> </div> <!-- ends main div --> <!-- custom js file --> <script src='../js/main.js'></script> </body> </html>

如何單擊按鈕以將其內部文本屬性登錄到控制台？ 謝謝你的幫助。

Answer 1

您可以使用onclick ：

function myCustomAlert(parm) {
alert(param);
}
button.onclick = myCustomAlert(keys[i])

Answer 2

.getElementsByTagName()返回HTMLCollection而不是單個元素。 您可以迭代HTMLCollection並將事件附加到每個元素。

function get_text() 
{
  var buttons = document.getElementsByTagName('button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
      console.log('Button ' + this.innerText + ' clicked');
    }
  }
} // ends get_text function

將元素附加到document之后，應調用get_text() 。

..
document.getElementById('main').appendChild(docFrag);
get_text();
..

如何獲取JavaScript中動態生成的按鈕的內部文本？

問題描述

2 個解決方案

解決方案1
0 2019-02-01 01:24:35

解決方案2
0 已采納 2019-02-01 01:28:03

如何獲取JavaScript中動態生成的按鈕的內部文本？

問題描述

2 個解決方案

解決方案1 0 2019-02-01 01:24:35

解決方案2 0 已采納 2019-02-01 01:28:03

解決方案1
0 2019-02-01 01:24:35

解決方案2
0 已采納 2019-02-01 01:28:03