获取 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" class，因此将委托处理程序绑定到 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 代码，

每当事件被触发时，都会在回调中传回一个对象（一般命名为'event'）。这个对象有很多属性，包括源元素、点击位置等等。

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

使用 innerText 和 innerHTML 之间存在差异，但在您的情况下，两者都可以使用。

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

获取 JavaScript 按钮的字符串值

Getting String Value Of JavaScript Button

javascript

dom

button