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

您可以使用SELECT BOM.STYLE_ID, BOM.SEASON_ID, SUM(CASE WHEN BOM.Ad_compo_desc LIKE UPPER('%emb%') THEN 1 ELSE ISNULL(0, 'N/A') END) AS EMBRO, SUM(CASE WHEN BOM.Ad_compo_desc LIKE UPPER('%print%') THEN 1 ELSE ISNULL(0, 'N/A') END) AS PRINTING FROM IPLEXSTY_AD_BOM_DTL BOM WHERE CONTENT_CLASS = 'ART' GROUP BY BOM.STYLE_ID, BOM.SEASON_ID;：

onclick

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

get_text()应该在元素附加到document之后调用。

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

如何获取JavaScript中动态生成的按钮的内部文本？

2 个答案: