Loading ...
Sorry, an error occurred while loading the content.
 

Re: [jslint] Re: Be careful when making functions in a loop...

Expand Messages
  • William Chapman
    Ben, Please forgive my previous email which is totally wrong! The following actually works (shamelessly copied from Crockford: The Good Stuff page 39):
    Message 1 of 8 , Aug 20, 2008
      Ben,

      Please forgive my previous email which is totally wrong! The following
      actually works (shamelessly copied from Crockford: "The Good Stuff" page
      39):

      function main() {
      var arr = ['a', 'b', 'c'];
      for (var i = 0; i < 3; i++) {
      document.getElementById(arr[i]).onclick = function(i) {
      return function (event) {
      alert(i);
      };
      }(i);
      }
      }

      Other comments:
      (1) The onclick handlers in your HTML <input > elements are overwritten by
      main() above, so are not needed..
      (2) Your original forEach() function is not used in the above approach.

      Sorry about the bum steer!

      -- Bill

      On Wed, Aug 20, 2008 at 9:24 AM, William Chapman <jeddahbill@...>wrote:

      > Ben,
      >
      > Another approach:
      >
      > function main() {
      > var arr = ['a', 'b', 'c'];
      > var closedValue;
      > for (var i = 0; i < 3; i++) {
      > closedValue = i;
      > document.getElementById(arr[i]).onclick = function(closedValue) {
      > alert(closedValue);
      > });
      > }
      > }
      >
      > In your code, this line:
      > alert(i)
      > displays the value of i **when the button is clicked**, as opposed to,
      > **when the function is assigned to onclick.**
      >
      > For me, the original point - that one needs to take care when defining
      > functions in a loop - is valid. Which isn't the same as saying it's never a
      > good idea.
      >
      > -- Bill
      >
      >
      > On Tue, Aug 19, 2008 at 1:40 PM, Ben Collver <tylx@...> wrote:
      >
      >> I created a page with three buttons, a, b, and c. When you click on a
      >> button, it alerts its number. I modified the loop to attach an onclick
      >> handler to each input element and alert the index. They all alert 4 as
      >> expected.
      >>
      >> I must have misunderstood the instructions. The page is at
      >> http://bencollver.googlepages.com/looptest.html
      >>
      >> Ben
      >>
      >> __________________________________________________________
      >> Posted by: "Douglas Crockford" douglas@...<douglas%40crockford.com>douglascrockford
      >> Date: Wed Aug 13, 2008 11:31 am ((PDT))
      >>
      >>
      >> Create a page with three buttons, a, b, and c. When you click on a
      >> button, it alerts its number. Modify your loop to get each element by
      >> id and attach an onclick handler that alerts the index. If you do it
      >> incorrectly, they will all alert the same wrong number.
      >>
      >>
      >>
      >
      >


      [Non-text portions of this message have been removed]
    • Ben Collver
      Bill, Thank you for the response. I worked backward from it to get to an example of the problem. It behaves the same on several hosts: it outputs three 3 s.
      Message 2 of 8 , Aug 25, 2008
        Bill,

        Thank you for the response. I worked backward from it to get to an example of the problem. It behaves the same on several hosts: it outputs three 3's. My original WSH example must have avoided the problem.

        http://bencollver.googlepages.com/looptest3.html

        Cheers,

        Ben
      Your message has been successfully submitted and would be delivered to recipients shortly.