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

};

score 3 · Accepted Answer · answered Jun 02 '14 at 20:58

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 02 '14 at 20:58

Nick Avi

1,231
2
7
6

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 Jun 02 '14 at 21:01
@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;`. – Amberlamps Jun 02 '14 at 21:09

score 1 · Answer 2 · edited May 23 '17 at 12:11

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 '17 at 12:11

Community

1
1

answered Jun 02 '14 at 20:55

Andrew

4,953
15
40
58

I've tried doing that but every button i click returns in the log "undefined". – user3700824 Jun 02 '14 at 20:57
1

this answer is wrong EDIT: This answer keeps changing – Nick Avi Jun 02 '14 at 20:58

score 0 · Answer 3 · answered Jun 02 '14 at 21:27

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

How do I debug JavaScript .onclick event?

3 Answers3