Web Analytics Made Easy - StatCounter Porblem with calling a function from onclick - dynamically appended script - CodingForum

Announcement

Collapse
No announcement yet.

Porblem with calling a function from onclick - dynamically appended script

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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.
    Tags: None
  • #2
    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;

    Comment

    • #3
      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 (:

      Comment

      • #4
        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

        Comment

        • #5
          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.

          Comment

          • #6
            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.

            Comment

            • #7
              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.

              Comment

              • #8
                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>

                Comment

                • #9
                  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>

                  Comment

                  • #10
                    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.

                    Comment

                    • #11
                      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

                      Comment

                      Previous template Next
                      Working...
                      X