Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post

    addEventListener not passing function variable correctly

    Every time i click on one of the said elements, it puts "undefined" into the textbox each time i click on an element.

    it seems to me that the Key_Table[x] is not getting passed correctly. How do i make sure that this is getting passed correctly?


    Here's my Code:

    Code:
    <script type='text/javascript'>
    // Startup Script
    if (document.addEventListener) {
      document.addEventListener("DOMContentLoaded", LoadEventListeners, false);
    }
    
    function LoadEventListeners()
    {
     var Key_Table = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
     
     // Create event Listeners for the alphabetic keys
     for(var x = 0; x < Key_Table.length; x++)
        {
         Key_Table[x] = document.getElementById(Key_Table[x]);
    	 
    	 Key_Table[x].addEventListener("click",
                             function(){
                              InsertChar(Key_Table[x]);
                             },
                             false);
        }
    }
    
    function InsertChar(Char)
    {
     alert("Char is:" + Char);
     // Textbox data
     document.getElementById('TextData').value = document.getElementById('TextData').value + Char;
    }
    </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Code:
    Key_Table[x] = document.getElementById(Key_Table[x]);
    That seems meaningless to me.

    I expect you know that addEventListener is not supported in IE.

  • #3
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    Code:
    Key_Table[x] = document.getElementById(Key_Table[x]);
    That seems meaningless to me.

    I expect you know that addEventListener is not supported in IE.
    i'm only supporting FireFox and Chrome.



    it's going to be used as an Offline DHTML app.


    I'm actually writing a Text Editor, which has the look and feel of the Android 1.6 UI. This function is for the onscreen keyboard.

  • #4
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by KevinJohnson View Post
    i'm only supporting FireFox and Chrome.



    it's going to be used as an Offline DHTML app.


    I'm actually writing a Text Editor, which has the look and feel of the Android 1.6 UI. This function is for the onscreen keyboard.


    I'm trying to create all of my event listeners inside of a for-next loop. each ID has a very simple naming convention.

    each key's ID is the name of that key

    for example:

    <id="a" class="mykeyclass">a</div>


    that's the element and DIV for the lowercase 'a' key.

    eventually i will also need to write a File-Picker Dialogue as well. So i will need a similar for-next loop for clicking on file names.

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,335
    Thanks
    13
    Thanked 348 Times in 344 Posts
    then it's probably better to get the "keys" by their class name. and since you don't need to be backward compatible, you can use some of the advanced features as well.
    PHP Code:
    function insertChar()
    {
        
    alert("Char is:" this.id);
        
    document.getElementById('TextData').value += this.id;
    }
    function 
    loadListeners()
    {
        var 
    key_table document.getElementsByClassName("mykeyclass");
        Array.
    prototype.forEach.call(key_table, function (item) {
            
    item.addEventListener("click"insertCharfalse);
        });

    PS. you are aware the IDs must not start with numbers?
    Last edited by Dormilich; 12-11-2010 at 11:21 AM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Posting Permissions

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