Getting String Value Of JavaScript Button

Question

I have a list of buttons that is created by the DOM which references an array. When a button in the list is clicked, I want to retrieve the String that is displayed on the Button.

I have tried the following code to reference the string value, but get undefined: this.String; inside the function when the button is clicked to retreive the string.

How can I properly retrieve the string.

The click handling function is:

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

This is how the list of buttons is created:

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;
}

Have you tried this.textContent? Please show the click handling function. — nnnnnn
– nnnnnn, Commented Mar 8, 2015 at 6:02

nnnnnn · Accepted Answer · 2015-03-08 06:13:03Z

1

Assuming that this is a reference to the button element in question, you can use this.textContent to get the button's text. (Or .innerHTML.)

Demo: http://jsfiddle.net/w0ntsrLx/

Or since in your edited question you seem to be using jQuery, use the .text() method. In a comment you say that the containing div has the "timeButtons" class, so bind a delegated handler to that div as follows:

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

Demo: http://jsfiddle.net/w0ntsrLx/1/

That way the function will only be called if the click is on a button element within the .timeButtons div, and this will be the clicked button. The click handler that you show in your question with $(".timeButtons").click(...) is bound to the div and doesn't in any way test for the buttons, so within the handler this will be the div, not the clicked button.

edited Mar 8, 2015 at 6:13

answered Mar 8, 2015 at 6:07

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nielarshi · Accepted Answer · 2015-03-08 06:19:22Z

0

Check this out

Assuming you want pure javascript code,

Whenever an event is triggered, an object is passed back in callback (generally being named as 'event'). this object has many properties including source element, position of click and many more.

get the element using event.srcElement
You can use element.innerHTML or element.innerText to find out the content of the Button.

There is a difference between using innerText and innerHTML, but in your case, both can be used.

Also, you can use jquery too to easily append child, create elements and binding events.

edited Mar 8, 2015 at 6:19

answered Mar 8, 2015 at 6:12

Nielarshi

1,1367 silver badges11 bronze badges

2 Comments

StevenZ Over a year ago

I just tried this.innerText but I get the whole array that populates the list, not the single list item.

Nielarshi Over a year ago

Check the jsbin link i have put with the answer. maybe you will get the idea. I am using event.srcElement to get the button reference.

Collectives™ on Stack Overflow

Getting String Value Of JavaScript Button

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related