获取 JavaScript 按钮的字符串值

Question

我有一个由引用数组的 DOM 创建的按钮列表。单击列表中的按钮时，我想检索显示在按钮上的字符串。

我已尝试使用以下代码来引用字符串值，但未定义： this.String;在函数内点击按钮时获取字符串。

如何正确检索字符串。

点击处理函数为：

$('.timeButtons').click(function() {
    confirmation.push(this.textContent);
})

这就是按钮列表的创建方式：

var populateList=function(array){
    var list = document.createElement('ul');
    list.className="delete";
    for(var i = 0; i < array.length;- i++) {
        var item = document.createElement('li');
        var itemButton=document.createElement('button');
        itemButton.style.cssText='background:#f85a5a; border:none; width:200px; height:50px; margin-bottom:50px; align:center; border-radius:25px; color:#ffffff;'
        itemButton.appendChild(document.createTextNode(array[i]));
        item.appendChild(itemButton);
        list.appendChild(item);     
    }
    return list;
}

Answer 1

假设this 是对相关按钮元素的引用，您可以使用this.textContent 来获取按钮的文本。 （或.innerHTML。）

演示：http://jsfiddle.net/w0ntsrLx/

或者因为在您编辑的问题中您似乎使用的是 jQuery，请使用 .text() method。在评论中您说包含 div 具有 "timeButtons" 类，因此将委托处理程序绑定到该 div，如下所示：

$(".timeButtons").on("click", "button", function(e) {
    confirmation.push($(this).text());
});

演示：http://jsfiddle.net/w0ntsrLx/1/

这样，只有在.timeButtons div 内的按钮元素上单击时才会调用该函数，而this 将是被单击的按钮。您在问题中使用 $(".timeButtons").click(...) 显示的点击处理程序绑定到 div 并且不会以任何方式测试按钮，因此在处理程序中 this 将是 div，而不是点击的按钮。

Answer 2

Check this out

假设您想要纯 JavaScript 代码，

每当触发事件时，都会在回调中传回一个对象（通常称为“事件”）。这个对象有很多属性，包括源元素、点击位置等等。

1. 使用 event.srcElement 获取元素

2. 您可以使用 element.innerHTML 或 element.innerText 找出 Button 的内容。

使用innerText 和innerHTML 是有区别的，但在你的情况下，两者都可以使用。

此外，您也可以使用 jquery 轻松追加子元素、创建元素和绑定事件。