www.webdeveloper.com
Results 1 to 3 of 3

Thread: How do I create an onclick event function inside another function?

Hybrid View

  1. #1
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    84

    How do I create an onclick event function inside another function?

    Hi, How do I create an onclick event function inside another function that can call a specific function?

    For example, if I have...
    Code:
    function addChoice(buttonText, name, id) {
    
        var span = document.createElement("span");   
        span.setAttribute('id', name);
        document.getElementById("mainContent").appendChild(span);
        
        var element = document.createElement("input");
        element.type = "button";  
        element.value = buttonText; 
        element.name = name; 
        element.onclick = function() 
        { 
            name; // call this function
        };
    
        var addtoSpan = document.getElementById(name);     
        addtoSpan.appendChild(element);
    }
    
    // pretend "start" was given as an argument to addChoice()
    var start = function()
    {
    	console.log("start was called");
    }
    If addChoice("Click me", "start", "start") was given, I would expect the start function to be called when the user clicks the "Click me" button. Instead, nothing happens.

    Thanks.
    Last edited by leke; 01-24-2014 at 12:33 PM.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style></style>
    <script>
    function addChoice(buttonText,name,id) {
    
        var span = document.createElement("span");   
        span.setAttribute('id', name);
        document.getElementById("mainContent").appendChild(span);
        
        var element = document.createElement("input");
        element.type = "button";  
        element.value = buttonText; 
        element.name = name; 
        element.onclick = function() 
        { 
            eval(name+'()'); // call this function
        };
    
        var addtoSpan = document.getElementById(name);     
        addtoSpan.appendChild(element);
    }
    
    // pretend "start" was given as an argument to addChoice()
    var start = function()
    {
    	alert("start() was called");
    }
    
    window.onload=function(){addChoice('start button','start');}
    </script>
    </head>
    <body>
    <div id="mainContent"></div>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    84
    Yeah, eval! I forgot all about that one. Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles