How do I debug JavaScript .onclick event?

Question

I have a piece of code that is executed when the page is fully loaded. The function then gathers all the button elements on my HTML page. From here I loop through getting each button's title attribute and then assign an onclick event to the button that is equal to a function that writes to the console.log with the title.

I have tried various ways of doing this but it is not working. Here is the JavaScript code that I'm working with. Currently all it does is loop through calling the function and logging the tile to the console.log, but this is not supposed to happen. Each time I click the button it should call the function with its title and log that.

window.onload = myPageIsReady;

function myPageIsReady(){

    var myList = document.getElementsByTagName("button");
    var myTitle = [];


    for(var i = 0; i < myList.length; i++){ 
        myTitle[i] = myList[i].getAttribute("title");       
        myList[i].onclick = getMyTitle(myTitle[i]);
    };

    function getMyTitle(myTitle){
        console.log(myTitle);
    };

};

Nick Avi · Accepted Answer · 2014-06-02 20:58:49Z

3

call me crazy but...

var myList = document.getElementsByTagName("button");


for(var i = 0; i < myList.length; i++){ 
    myList[i].onclick = function(){
        console.log(this.getAttribute("title"));
    }
};

answered Jun 2, 2014 at 20:58

Nick Avi

1,2392 gold badges7 silver badges6 bronze badges

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

2 Comments

Amberlamps Over a year ago

That would work, but it is not a good practice as you are always creating an anonymous function for every iteration even though the function does always the same things.

Amberlamps Over a year ago

@undefined: Well, for this case you could just write myList[i].onclick = getMyTitle; and get the value within getMyTitle() via this.getAttribute('title'). But if it was an arbitrary, calculated value, one could argue to append it to the object and reference via this as well: myList[i].arbValue = i*i;.

Community · Accepted Answer · 2017-05-23 12:11:03Z

1

You have to set it to an anonymous function:

myList[i].onclick = (function() {
  var currentI = i;
  return function() { 
      getMyTitle(myTitle[currentI]);
  }
})();

(taken from here)

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Jun 2, 2014 at 20:55

Andrew

5,10415 gold badges44 silver badges60 bronze badges

2 Comments

user3700824 Over a year ago

I've tried doing that but every button i click returns in the log "undefined".

Nick Avi Over a year ago

this answer is wrong EDIT: This answer keeps changing

g2guo · Accepted Answer · 2014-06-02 21:27:09Z

0

You need to use:

window.onload = myPageIsReady;

instead of

window.onload = myPageIsReady();

The following is my solution, it creates one function getMyTitle and assigns it to onclick. Here is an example link of the code: http://jsfiddle.net/3Xg3s/6/

window.onload = myPageIsReady;

function getMyTitle() {
    alert(this.title)
};

function myPageIsReady() {
    var myList = document.getElementsByTagName("button");
    for (var i = 0; i < myList.length; i++) {
        myList[i].onclick = getMyTitle;
    };
};

answered Jun 2, 2014 at 21:27

g2guo

263 bronze badges

Collectives™ on Stack Overflow

How do I debug JavaScript .onclick event?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related