单击按钮的警报内部 HTML

Question

我希望我的函数返回按钮内字符串的值，以便稍后用于其他内容。

我尝试(this).innerHTML 和this.innerHTML 提取按钮内部的字符串，然后在js中使用 HTML：

<button class="fonts" value="2" onclick="change((this).innerHTML)">Times New Roman</button><br>
<button class="fonts" value="1" onclick="change(this.innerHTML)">Calibri</button><br>
<button class="fonts" value="3" onclick="change(this.innerHTML)">Arial</button>

JS：

function change(){
  alert();
}

我希望它提醒“Times New Roman”或其他字体，但它提醒一个空白值。

Answer 1

试试

function change(btn) {
  alert(btn.innerHTML);
}

<button onclick="change(this)">Times New Roman</button>
<button onclick="change(this)">Calibri</button>
<button onclick="change(this)">Arial</button>

Answer 2

您应该避免使用内联 on* 处理程序（onclick、oninput 等），而应在脚本本身中使用事件侦听器来提醒元素的文本内容。

检查并运行以下 代码片段，以获得我上面描述的实际示例：

/* JavaScript */

var btns = document.querySelectorAll(".fonts"); // retrieve all buttons

//use forEach() to add a click event listener to each button
btns.forEach(function (btn) {
  btn.addEventListener("click", function() {
    alert(this.innerHTML);
  });
});

<!-- HTML -->

<button class="fonts" value="2">Times New Roman</button><br>
<button class="fonts" value="1">Calibri</button><br>
<button class="fonts" value="3">Arial</button>

---

您可以使用 JavaScript ES6+ 来进一步缩短上述代码，如下所示：

document.querySelectorAll(".fonts").forEach(btn => {
  btn.addEventListener("click", () => alert(btn.innerHTML));
});

<button class="fonts" value="2">Times New Roman</button><br><button class="fonts" value="1">Calibri</button><br><button class="fonts" value="3">Arial</button>

---

NB 请注意，如果您使用 ES6+ 方法，您将需要使用像 Babel 这样的 JavaScript 编译器将您的 ES6+ 语法转换为向后兼容的 JavaScript 版本，以支持当前以及较旧的浏览器或环境。

---

IE11 兼容性：

如果您担心forEach() 方法的 IE11 兼容性，您可以使用简单的for loop，如下所示：

/* JavaScript */

var btns = document.querySelectorAll(".fonts"); // retrieve all buttons

//use forEach() to add a click event listener to each button

for(i=0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    alert(this.innerHTML);
  });
}

<!-- HTML -->

<button class="fonts" value="2">Times New Roman</button><br>
<button class="fonts" value="1">Calibri</button><br>
<button class="fonts" value="3">Arial</button>

Answer 3

使用像onclick="whatever()" 这样的内联事件侦听器被广泛认为是不好的做法。

相反，使用 document.querySelectorAll(selector) 从 DOM 获取按钮集合，并在 for...of 循环中的每个按钮上使用 addEventListener()：

let buttons = document.querySelectorAll('button.fonts')

for (const button of buttons) {
  button.addEventListener('click', function() { alert(this.textContent); })
}

<button class="fonts" value="2">Times New Roman</button><br>
<button class="fonts" value="1">Calibri</button><br>
<button class="fonts" value="3">Arial</button>

Answer 4

您实际上并没有将innerHTML 传递给函数。 JS 应该看起来更像这样：

function change(font){
    alert(font);
}

HTML 看起来像这样：

<button onclick="change(this.innerHTML)">Times New Roman</button>
<button onclick="change(this.innerHTML)">Calibri</button>
<button onclick="change(this.innerHTML)">Arial</button>

这是一个实际操作：JSFiddle

---

如果你想要一个更简单的实现，你可以这样做：

JS：

function change(e){
        e = e || window.event;
    e = e.target || e.srcElement;
    alert(e.innerHTML);
}

HTML：

<button onclick="change()">Times New Roman</button>
<button onclick="change()">Calibri</button>
<button onclick="change()">Arial</button>

JSFiddle Demo