单击时提取按钮 ID 或标签答案

【问题标题】：Extract button Id or label when clicked单击时提取按钮 ID 或标签
【发布时间】：2021-02-12 06:56:29
【问题描述】：

我的模板有一系列这种格式的按钮：

<button class="button button1" onclick="showAlert(xxx)">Button 1</button>
<button class="button button2" onclick="showAlert(xxx)">Button 2</button>
...
<button class="button buttonN" onclick="showAlert(xxx)">Button N</button>

几行之后，我想显示这段文字：

<h2>Button {{x}} was clicked</h2>

如何实现 Javascript 函数showAlert？我对Javascript不太熟悉。我可以在变量{{x}} 中放入什么来实现此警报？谢谢。

【问题讨论】：

标签： javascript html django-templates

【解决方案1】：

使用 ES6（更新的 JavaScript）来解决这个问题。不要忘记在 IE 中检查它的兼容性。如果它不起作用，那么您可以谷歌 "forEach Alternative IE 9" 等。

这样您仍然可以在另一个循环中输出所有按钮，只需使用 id 的“增量”值。

let buttons = document.querySelectorAll('button');
let outputText = document.getElementById('btn-num');

buttons.forEach(button => {
    button.addEventListener('click', event => {
   outputText.innerText = `Button ${event.currentTarget.getAttribute('data-id')} was clicked`;
  })
})

<button class="button button1" data-id="1">Button 1</button>
<button class="button button2" data-id="2">Button 2</button>
<button class="button button3" data-id="3">Button 3</button>
<button class="button button4" data-id="4">Button 4</button>

<h2 id="btn-num">Please click a button...</h2>

【讨论】：

【解决方案2】：

希望对你有所帮助

function showAlert(x) {
    var y = document.getElementById('resText');
    y.innerText = 'Button ' + x + ' was clicked'
}

<button class="button button1" onclick="showAlert('B1')">Button 1</button>
<button class="button button2" onclick="showAlert('B2')">Button 2</button>
<button class="button buttonN" onclick="showAlert('BN')">Button N</button>

<h2 id="resText"></h2>

【讨论】：