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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 35
  1. #1
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts

    setting onClick attribute with javascript that points to a function with param

    I've read the threads about how to set the onclick attribute with a javascript and I am implementing it as such right now.

    temptemp.onclick = Function("displayStaff()");

    But now I want to make my displayStaff() function take a parameter, how do I go about doing it. I tried this:

    temptemp.onclick = Function("displayStaff(" + newCenterName + ")");

    where newCenterName was a string variable but it didn't work. The error was that newCenterName (or rather the string it represented, so it does recognize the string) was undefined. Does somebody know how to deal with this issue so that I can put a parameter in my javascript? Thanks

    Let me ask this short and sweet. How can I write a javascript such that it creates the following:

    <a href="#" onclick="somefunction(dynamic)"></a>

    where the word dynamic is dynamically chosen by the javascript. Thanks, this is driving me crazy.
    Last edited by deadseasquirrel; 05-25-2004 at 06:49 PM.

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    define your parameters when you define the function like this:

    If passing a string to the function the paramaters should be in quotes when the function is called:

    EX.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showExample(param1,param2)
    {
       var x=param1;
       var y=param2;
       alert(x+' '+y);
    }
    
    </script>
    </head>
    <body>
    <a href="#" onclick="showExample('Hello','World');">Coding Forums</a>
    <iframe src="http://www.google.com" id="main"></iframe>
    </body>
    </html>
    If you are passing a variable to the function then you don't need the quotes:

    EX.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showExample(param1,param2)
    {
       var x=param1;
       var y=param2;
       showExample2(x,y);
    }
    
    function showExample2(param1,param2)
    {
    	var str=param1+' '+param2;
    	alert(str);
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="showExample('Hello','World')";>Coding Forums</a>
    <iframe src="http://www.google.com" id="main"></iframe>
    </body>
    </html>
    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #3
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, but the question here is how do I make this code:

    <a href="#" onclick="showExample('Hello','World')";>Coding Forums</a>

    dynamically in a javascript.

    For those who understand what my issue is, you will know that you can not just do

    aElement.setAttribute ("onclick", "showExample(...)");

    I need a javascript that will set the onclick attribute to:
    onclick = "someFunction(dynamic)"

    Where the word dynamic is, well, dynamic and decided by the javascript.

  • #4
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    possibly:

    ...setAttribute("onclick", function(){return functionName("blah")});

    edit:// actually, that only works in IE, so:
    ...onclick=function(){return functionName("blah")};
    Last edited by swmr; 05-25-2004 at 07:29 PM.
    hmm... ?

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    I'm sorry I didn't fully answer your questoin.

    Does this answer it better?

    You need quotes around the string else it will pass the variable named whatever your string says, which would be undefined.

    Just a tip:
    When posting it's best to state what you are trying to do in English, then showing an example of your code (working or not) within the code tags. If you wish to place notation within the code use the comment tag.It will generally lead to a more clearly communicated question.


    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showExample(param1,param2)
    {
       var x=param1;
       var y=param2;
       alert(x+' '+y);
    }
    
    function setOnclick()
    {
    	var x='Hello';
    	var y='World';
    	document.getElementById('link1').onclick=Function("showExample('"+x+"','"+y+"')");
    }
    </script>
    </head>
    <body onload="setOnclick()">
    <a href="#" id="link1">Coding Forums</a>
    </body>
    </html>
    Basscyst
    Last edited by Basscyst; 05-25-2004 at 07:48 PM.
    Helping to build a bigger box. - Adam Matthews

  • #6
    Rex
    Rex is offline
    New Coder
    Join Date
    May 2004
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Basscyst -

    What if the string itself contains an apostrophe? That would lead to a syntax error. So we should maybe use a function to escape some characters:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function escapeChars(str)
    {
        str = str.replace(/\\/g, '\\\\');
        str = str.replace(/\'/g, '\\\'');
        return str;
    }
    
    function showExample(param1,param2)
    {
       var x=param1;
       var y=param2;
       alert(x+' '+y);
    }
    
    function setOnclick()
    {
        var x='Hello';
        var y='World';
        document.getElementById('link1').onclick=Function("showExample('"+escapeChars(x)+"','"+escapeChars(y)+"')");
    }
    </script>
    </head>
    <body onload="setOnclick()">
    <a href="#" id="link1">Coding Forums</a>
    </body>
    </html>
    - Rex
    Sincerely,
    Rex

  • #7
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Or you can just switch around the order in which you use your quotes in the script. My mistake.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showExample(param1,param2)
    {
       var x=param1;
       var y=param2;
       alert(x+' '+y);
    }
    
    function setOnclick()
    {
    	var x="Hello";
    	var y="World's";
    	document.getElementById('link1').onclick=Function('showExample("'+x+'","'+y+'")');
    }
    </script>
    </head>
    <body onload="setOnclick()">
    <a href="#" id="link1">Coding Forums</a>
    </body>
    </html>
    Basscyst
    Last edited by Basscyst; 05-25-2004 at 07:50 PM.
    Helping to build a bigger box. - Adam Matthews

  • #8
    Rex
    Rex is offline
    New Coder
    Join Date
    May 2004
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Basscyst -

    Your code works well if you are certain that the string doesn't contain a double quote or a backslash. It could be used with user input and then you don't know what it contains... In such a case, a simple escaping function wouldn't be useless. :)

    - Rex
    Sincerely,
    Rex

  • #9
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Indeed far from useless but in the above example we are setting the attributes of onclick in which case it would be fairly safe to assume, unless the end user is somehow customizing the links, that we know what values are going to be contained in the variable and code it as such. While in his\her case it may be usefull, it wasn't really the question here. Though I didn't exactly answer the question first out either.
    Basscyst
    Last edited by Basscyst; 05-25-2004 at 08:18 PM.
    Helping to build a bigger box. - Adam Matthews

  • #10
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think the issue here is not really the question about quotes or double quotes or anything like that. swmr hit it on the mark with his reponse (though I haven't tried it yet). The issue here is with IE handling of
    setAttributes("onclick", [function(param)]);

    The problem is with mixing of double quotation marks and single quotation marks. swmr, if you are around, perhaps you can explain it a little more elegantly.

  • #11
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    The problem with your example code above was in fact a syntax error in your usage of the quotation marks. Though swmr's way may in fact be a better solution.

    Code:
    temptemp.onclick = Function("displayStaff(" + newCenterName + ")");
    should be:

    Code:
    temptemp.onclick = Function("displayStaff('" + newCenterName + "')");
    Sorry to have gone off on a brief tangent.


    Basscyst
    Last edited by Basscyst; 05-25-2004 at 08:46 PM.
    Helping to build a bigger box. - Adam Matthews

  • #12
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    strings aren't my thing.
    Re: attributes - all I can offer is what's been discussed here.
    hmm... ?

  • #13
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts
    basscyst your code:
    temptemp.onclick = Function("displayStaff('" + newCenterName + "')");

    would be correct (maybe, I can't even say if it would work) if newCenterName was a string that I wanted to pass, but newCenterName is a variable within the javascript which should change depending a number of things. So I the way I wrote it, though it didn't work, should have been logically sound.

    temptemp.onclick = Function("displayStaff(" + newCenterName + ")");

    would have produced
    temptemp.onclick = Function("displayStaff([dynamic part]"));

    which should have, mind you should have, created the html code:

    <a onclick="displayStaff([dynamic part])"></a>

  • #14
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I had the same problem of adding an event handler which includes a parameter to a dynamically created element. Below is an example of how I solved it.

    Code:
    <script type="text/javascript">
     <!--//
      var count = 0;
      function addRow(insertHere){
        newRow  = document.createElement("tr");
        newRow["onclick"] = new Function("addRow(this)");
        newCell = document.createElement("td");
        newCell.innerHTML = insertHere.innerHTML+'('+count+++')';
        newRow.appendChild(newCell);
        insertHere.parentNode.insertBefore(newRow,insertHere.nextSibling);
      }
     //-->
    </script>
    </head>
    
    <body>
    <table>
    <tr onclick="addRow(this)"><td>data 1</td></tr>
    <tr onclick="addRow(this)"><td>data 2</td></tr>
    <tr onclick="addRow(this)"><td>data 3</td></tr>
    </table>
    .....Willy
    Last edited by Willy Duitt; 05-25-2004 at 10:49 PM.

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just like a program can be written without "goto" statements, efficient organization of data and interfaces will erase the perceived need to have arguments in event handlers.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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