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

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

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中获取按钮的集合，并在addEventListener()循环中的每个按钮上使用for...of：

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

尝试

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>

提醒内部HTML已单击的按钮

4 个答案:

IE11兼容性：