javascript - 单击按钮的警报内部 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”或其他字体，但它提醒一个空白值。

标签： javascripthtmlecmascript-6ecmascript-5

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 演示