CODEWITHSUNDEEP
javascriptdom-events
Tonya
Tonya

Reputation: 5

Make a div clickable in JavaScript

I am trying to dynamically make divs that are clickable. I have inserted a test function. The test function runs even though the div has not been clicked.

  function displayResults(responseTxt)
  { 
        var results = document.getElementById("results");
        jsonObj = eval ("(" + responseTxt + ")");
        var length = jsonObj.response.artists.length;
        results.innerHTML = "Please click on an artist for more details: "
        
        for ( var i = 0; i < length; i++)
        {
            var entry = document.createElement("div");
            var field = document.createElement("fieldset");
            
            entry.id = i;
            entry.innerHTML = i + 1 + ". " + jsonObj.response.artists[i].name; 
            field.appendChild(entry);
            results.appendChild(field);
            //entry.addEventListener("click", idSearch(jsonObj.response.artists[i].id), false);
            entry.addEventListener("click", test(), false);
            
        } 
  } // end function displayResults          
  
  function test()
  {
        document.getElementById("results").innerHTML = "tested";
  }

Upvotes: 0

Views: 530

Answers (1)

nnnnnn
nnnnnn

Reputation: 150020

You are calling the test() function and passing its return value to .addEventListener(). Remove the parentheses:

entry.addEventListener("click", test, false);

So that you pass the function itself to .addEventListener().

That answers the question as asked, but to anticipate your next problem, for the line you've got commented out you'd do this:

entry.addEventListener("click",
                       function() {
                          idSearch(jsonObj.response.artists[i].id);
                       }, false);

That is, create an anonymous function to pass to .addEventListener() where the anonymous function knows how to call your idSearch() function with parameters. Except that won't work because when the event is actually triggered i will have the value from the end of the loop. You need to add an extra function/closure so that the individual values of i are accessible:

    for ( var i = 0; i < length; i++)
    {        
        var entry = document.createElement("div");
        var field = document.createElement("fieldset");

        entry.id = i;
        entry.innerHTML = i + 1 + ". " + jsonObj.response.artists[i].name; 
        field.appendChild(entry);
        results.appendChild(field);
        // add immediately-invoked anonymous function here:
        (function(i) {
            entry.addEventListener("click",
                               function() {
                                  idSearch(jsonObj.response.artists[i].id);
                               }, false);
        })(i);
    }

That way the i in jsonObj.response.artists[i].id is actually going to be the parameter i from the anonymous function which is the individual value of i from the loop at the time each iteration ran.

Upvotes: 1

Related Questions