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 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Porblem with calling a function from onclick - dynamically appended script

    Hello, excusme if the problem is easy but I really cannot find the solution. And this is my first post here - so if I make any mistakes - appologies.

    Problem:
    1) The script is appended to the page - kind of bookmarklet creating a div on the left side of the page. I want to make a list of links there that after clicking the link will execute a function.
    2) As for the element to which I want to append the onclick is <a> element

    Now the problem is that all looks all right but when i click the link with assigned function to onclick event the browser says xxx is not defined

    The code looks like (just a piece and example - if needed more let me know):

    Code:
    function alert_fun ()
      {
        alert ('ddd');
      }
    
    var link = document.createElement('a');
    link.setAttribute('id', 'a_item1');
    link.setAttribute('onclick', 'alert_fun ()');
    
    
     var _item1anchor_Ref = document.getElementById("a_item1");
      _item1anchor_Ref.style.color = "navy";
      _item1anchor_Ref.style.textDecoration = "none";
      _item1anchor_Ref.innerHTML = 'Unframe';
    (....)

    After checking the code when executed we got:
    i
    <a id="a_item1" onclick="alert_fun ()" style="color: navy; text-decoration: none;">Unframe</a>


    However the function cannot be called.

    Any help or hints appreciated. Thank U.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Forget about setAttribute for "on" event handlers. They should be used with the property notation (e.g. link.onclick = ....) instead and expect to be assigned with a function reference (and not a string!)

    Code:
    link.id = 'a_item1';
    link.onclick = alert_fun;

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for quick reply devnull69

    Now the sit. is:

    Code:
     link.id = 'a_item1';
    <<< working ok as supposed to work

    Code:
    link.onclick = alert_fun;
    <<< throwing out error "component not available"

    If I change the line 2nd line to:
    Code:
    link.onclick = alert_fun();
    <<< then the function is called when the page is loaded and then it doesnt launch the function when clicked ....

    So still stucked (:

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Try this:

    Code:
    link.onclick = function(){alert_fun();};
    I believe that will get you moving.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Rowsdower!, thx for help, but it throws out the same error - "Component it not available" (I am using it in FF 4.0.1)

    The code after the modifications is:

    Code:
    function alert_fun ()
      {
        alert ('ddd');
      }
     
        var link = document.createElement('a');
        link.id = 'a_item1';
        link.onclick = function(){alert_fun();};
    Line causing error >> link.onclick = function(){alert_fun();};
    If I comment it then all is ok but of course I dont have the functionality I need.

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                #left{float:left;}
            </style>
            <script type="text/javascript">
                function alert_fun ()
      {
        alert ('ddd');
      }
    
    
    function init(){
    	var link = document.createElement('a');
    	link.setAttribute('id', 'a_item1');
    	link.setAttribute('onclick', 'alert_fun ()');
    	link.innerHTML = "clickMe";
    	var left = document.getElementById("left");
    	left.appendChild(link);
    }
    
    
            </script>
        </head>
        <body onload="init()">
            <div id="left">
                
            </div>
        </body>
    </html>
    Maybe you should show the real code or a link.

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Of course here goes the code as it is .... as i said before it is appended dynamically - launched from browser url or used as script within grease monkey:

    Code:
    function create_div_dynamic_mainbox()
        {
            _mainbox = document.createElement('div'); // create dynamically div tag
            _mainbox.setAttribute('id',"mainbox");       //give id to it
            
            _mainbox.style.position="absolute";
            _mainbox.style.left= 20 + "px";
            _mainbox.style.top= 120 + "px";
            _mainbox.style.width = 240 + "px";
            _mainbox.style.height = 440 + "px";
            
            var _body = document.getElementsByTagName('body') [0];
            _body.appendChild(_mainbox);
        }
     
        //creating main place holder
        create_div_dynamic_mainbox();
        
     
      function create_div_dynamic_unframe()
        {
            _it1 = document.createElement('div'); // create dynamically div tag
            _it1.setAttribute('id',"unframediv");       //give id to it
            
            
            var _mainboxid_Ref = document.getElementById("mainbox");
            _mainboxid_Ref.appendChild(_it1);
        }
      
      function alert_fun ()
      {
        alert ('ddd');
      }
    
        var link = document.createElement('a');
        //link.setAttribute('id', 'a_item1');
        //link.setAttribute('href', _unframe_url);
        //link.setAttribute('name', '#');
        //link.setAttribute('onclick', 'alert_fun ()');
        link.id = 'a_item1';
        //link.onclick = function(){alert_fun();};
        
        
        var _mainbofid_Ref = document.getElementById("mainbox");
        _mainbofid_Ref.appendChild(link);
    
         var _item1anchor_Ref = document.getElementById("a_item1");
         
        _item1anchor_Ref.style.color = "navy";
        _item1anchor_Ref.style.textDecoration = "none";
        _item1anchor_Ref.innerHTML = 'Unframe';
    
    
        create_div_dynamic_unframe();
    The point is that the div and functions are appended dynamically.

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Did this real quick "off the cuff".

    Try working from here....

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
               
            </style>
            <script type="text/javascript">
    function create_div_dynamic_mainbox(){
           var _mainbox = document.createElement('div'); 
            _mainbox.setAttribute('id',"mainbox");             
            _mainbox.style.position="absolute";
            _mainbox.style.left= 20 + "px";
            _mainbox.style.top= 120 + "px";
            _mainbox.style.width = 240 + "px";
            _mainbox.style.height = 440 + "px"; 
    	_mainbox.innerHTML = "mainbox";       
            var _body = document.getElementsByTagName('body') [0];
            _body.appendChild(_mainbox);
        }
     function create_div_dynamic_unframe(){
            _it1 = document.createElement('div');  
            _it1.setAttribute('id',"unframediv");  
         _it1.innerHTML= "unframe";
            var _mainboxid_Ref = document.getElementById("mainbox");
            _mainboxid_Ref.appendChild(_it1);
        }
      
      function alert_fun ()
      {
        alert ('ddd');
      }
    
    var link = document.createElement('a');
        link.setAttribute('id', 'a_item1');
       link.setAttribute('href', '_unframe_url');
        link.setAttribute('name', '#');
        link.setAttribute('onclick', 'alert_fun ()');
        link.id = 'a_item1';
    
    function init(){
      
    create_div_dynamic_mainbox()
    create_div_dynamic_unframe()
    var _mainbofid_Ref = document.getElementById("mainbox");
        _mainbofid_Ref.appendChild(link);
    
         var _item1anchor_Ref = document.getElementById("a_item1");
         
        _item1anchor_Ref.style.color = "navy";
        _item1anchor_Ref.style.textDecoration = "none";
        _item1anchor_Ref.innerHTML = 'Unframe';
     }
       
    
    
            </script>
        </head>
        <body onload="init()">
            
        </body>
    </html>

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Probably better this way....

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
               
            </style>
            <script type="text/javascript">
    function create_div_dynamic_mainbox(){
           var _mainbox = document.createElement('div'); 
            _mainbox.setAttribute('id',"mainbox");             
            _mainbox.style.position="absolute";
            _mainbox.style.left= 20 + "px";
            _mainbox.style.top= 120 + "px";
            _mainbox.style.width = 240 + "px";
            _mainbox.style.height = 440 + "px"; 
    	_mainbox.innerHTML = "mainbox";       
            var _body = document.getElementsByTagName('body') [0];
            _body.appendChild(_mainbox);
        }
     function create_div_dynamic_unframe(){
            _it1 = document.createElement('div');  
            _it1.setAttribute('id',"unframediv");  
         _it1.innerHTML= "unframe";
            var _mainboxid_Ref = document.getElementById("mainbox");
            _mainboxid_Ref.appendChild(_it1);
        }
      
      function alert_fun ()
      {
        alert ('ddd');
      }
    
    var link = document.createElement('a');
        link.setAttribute('id', 'a_item1');
       link.setAttribute('href', '_unframe_url');
        link.setAttribute('name', '#');
        link.setAttribute('onclick', 'alert_fun ()');
        link.id = 'a_item1';
    
    
    window.addEvent = function(event, target, method) {
    	if (target.addEventListener) {
    		target.addEventListener(event, method, false);
    	} else if (target.attachEvent) {
    		target.attachEvent("on" + event, method);
    	}
    }
    
    
    addEvent("load",window,init);
    
    function init(){
      
    create_div_dynamic_mainbox()
    create_div_dynamic_unframe()
    var _mainbofid_Ref = document.getElementById("mainbox");
        _mainbofid_Ref.appendChild(link);
    
         var _item1anchor_Ref = document.getElementById("a_item1");
         
        _item1anchor_Ref.style.color = "navy";
        _item1anchor_Ref.style.textDecoration = "none";
        _item1anchor_Ref.innerHTML = 'Unframe';
     }
       
    
    
            </script>
        </head>
        <body>
            
        </body>
    </html>

  • Users who have thanked DaveyErwin for this post:

    Luccas (08-29-2011)

  • #10
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    DaveyErwin - Thank U !!! very much the 2nd version is working like a charm ...... Thank U

    I need just analizy few lines of ur code to just grasp how it works, but it is exactly what I needed. If I may, if I dont get sth, I will bump short question.

    For now it is what I was looking for. Big Thanks.

  • #11
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Luccas View Post
    DaveyErwin - Thank U !!! very much the 2nd version is working like a charm ...... Thank U

    I need just analizy few lines of ur code to just grasp how it works, but it is exactly what I needed. If I may, if I dont get sth, I will bump short question.

    For now it is what I was looking for. Big Thanks.
    Ask lots of questions

    If I can't answer someone else surely will


  •  

    Posting Permissions

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