单击按钮的警报内部 HTML

Question

我希望我的函数能够 return 按钮内字符串的值，以便稍后在其他内容中使用。

我尝试了 (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

您实际上并没有将 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>

这是一个 fiddle 的实际操作：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

Answer 2

尝试

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 3

您应该避免使用内联 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>

N.B. 请注意，如果您使用 ES6+ 方法，则需要使用 JavaScript 编译器，例如 Babel在生产环境中将你的 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 4

使用像 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>

单击按钮的警报内部 HTML

Alert inner HTML of clicked button

html

javascript

ecmascript-5

ecmascript-6

IE11 兼容性：