SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    addEventListener problem

    Why does this give 'el has no properties'?
    Code:
    function swap()
    {
    document.getElementById('field2').value=
    document.getElementById('field1').value
    }
    el=document.getElementById("butt");
    el.addEventListener("click", swap(), false)
    </script>
    <p>Field1: <input type="text" id="field1" value="Hello World!">
    <br />
    Field2: <input type="text" id="field2">
    <br /><br />
    Click the button below to copy the content of Field1 to Field2.
    <br />
    <button id="butt">Copy Text</button> </p>

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either put the js code after the markup or put it in the onload. e.g.

    onload = function(){
    el=document.getElementById("butt");
    el.addEventListener("click", swap(), false);
    }

  3. #3
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    M-M-J, wouldn't he just have to call the function by reference instead of invoke it?

    instead of swap(), just swap?

    Code:
    el.addEventListener('click', swap, false);

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to do both.

    The code assigning the event listener must come after the markup (or in an onload event listener), since it references an element ID (butt). If you run that code before the element with id="butt" is found, getElementById() will return null.

    You should also specify a reference to the swap() function in the call to addEventListener(), not call it.

    Code HTML4Strict:
    <fieldset>
      <legend>Copy</legend>
      <label for="field1">Field1:</label> <input type="text" id="field1" value="Hello World!">
      <br><label for="field2">Field2:</label> <input type="text" id="field2">
      <p>Click the button below to copy the content of Field1 to Field2.</p>
      <button id="butt">Copy Text</button>
    </fieldset>
     
    <script type="text/javascript">
      function swap() {
          document.getElementById('field2').value=document.getElementById('field1').value
      }
      el=document.getElementById("butt");
      el.addEventListener("click", swap, false);
    </script>
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    M-M-J, wouldn't he just have to call the function by reference instead of invoke it?

    instead of swap(), just swap?

    Code:
    el.addEventListener('click', swap, false);
    Heh, I wasn't checking the code for other errors, just for the error that the OP pointed out. Could catch though.


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
  •