SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Finland
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble unserstanding Undefined error.

    Just when I think I'm understanding javascript...

    The following returns the error i is Undefined on the line where i.style.visibility = 'visible'; is in the function.

    How come this is so when var i = document.createElement('INPUT'); was declared globally outside the function? Could someone explain why this is happening? Thanks.

    Code:
    var l = document.createElement('A');
    l.id = 'title_link';
    l.href = '#';
    l.innerHTML = 'Click to change element tag.';
    l.onclick = title_link_clicked();
    l.style.visibility = 'visible';
    document.body.appendChild(l);
    
    var i = document.createElement('INPUT');
    i.id = 'title_input';
    i.value = '';
    i.style.visibility = 'hidden';
    document.body.appendChild(i);
    
    // Switch visibility
    function title_link_clicked() {
    	l.style.visibility = 'hidden';
    	i.style.visibility = 'visible';
    	return false;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Code:
    l.onclick = title_link_clicked();
    doesn't do what you think it does. This will actually run title_link_clicked() immediately and assign l.onclick its return value. Since the function only returns false, your l element won't get an onclick handler. And the function is also called before the i element is created, that's the reason for the undefined error.

    What you want to do is:
    Code:
    l.onclick = title_link_clicked;

  3. #3
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    You can also add this to your code:
    Code:
    l.addEventListener('click', title_link_clicked, false);
    As said above, l.onclick means property access (l is the object, onclick is a property that happens to be a method also).

    Code:
    l.onclick = title_link_clicked();
    means the function on the right side is executed, a function call.

    Code:
    l.onclick = title_link_clicked;
    means the function on the right side is referenced, which is what you need.

    Something like this:
    Code:
    // Switch visibility
    function title_link_clicked() {
    	l.style.visibility = 'hidden';
    	i.style.visibility = 'visible';
    	return false;
    };
    
    var l = document.createElement('A');
    l.id = 'title_link';
    l.href = '#';
    l.innerHTML = 'Click to change element tag.';
    //l.onclick = title_link_clicked;
    l.addEventListener('click', title_link_clicked, false);
    l.style.visibility = 'visible';
    document.body.appendChild(l);
    
    var i = document.createElement('INPUT');
    i.id = 'title_input';
    i.value = '';
    i.style.visibility = 'hidden';
    document.body.appendChild(i);
    Of course, IE8- stay in the way: http://stackoverflow.com/questions/6...ner-vs-onclick.

  4. #4
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Finland
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks folks, that really cleared a few things up.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •