locked
Passing parameters to a function invoked from an event handler

    Question

  • Hello: 

    When I first thought my app I was thinking of doing something like this

    <a href="#" onClick="some_function(1,"A")">

    However after reading a bit on how things are done in Win 8, I realize I have to do this via event handler.  However I haven't seen any examples on how I could pass the parameters. 

    Any suggestions will be greatly appreciated

    TIA

     

    Tuesday, November 27, 2012 6:44 PM

Answers

  • Hi,

    The code as follow:

    var username = "bob";
        var color = "red";
    
    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
    function buttonClickHandler(eventInfo) {
            
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!"+username+color;
            document.getElementById("greetingOutput").innerText = greetingString;
            document.getElementById("greetingOutput").style.backgroundColor = "red";        
        }


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Sunday, December 2, 2012 4:11 AM
    Thursday, November 29, 2012 5:56 AM
  • I have a solution!  It's not very elegant but it worked.

    I wrote the link like this

    <a href="[4,'N']">nonviolence</a>

    where 4 and 'N' are the params I want to pass to the function.  My event handler goes like this

    navegar: function (eventInfo) {
    eventInfo.preventDefault();
    var idx = 0;
    var llave = "";

    var fin = String(eventInfo.target.href).length;
    var inicio = String(eventInfo.target.href).indexOf("[",0);
    var tira = String(eventInfo.target.href).substring(inicio, fin);

    var vector = eval(tira);

    idx = vector[0];
    llave = String(vector[1]);

    WinJS.Navigation.navigate("/pages/split/split.html", {
    groupKey: llave, selectedIndex: idx
    });

    }

    In this way I can pass as many parameters as needed to the handler. 

    Many thanks for all your help!

    Manuel


    Friday, November 30, 2012 4:07 PM

All replies

  • Hi,

    Please refer the follow code:

    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
    function buttonClickHandler(eventInfo) {
            
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString;
            document.getElementById("greetingOutput").style.backgroundColor = "red";
    
        }


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Wednesday, November 28, 2012 3:07 AM
  • Thank you for the reply Song!  Alas it's not quite what I was looking for.  In this example the handler only receives one parameter (the username) via the button.  I would like to define both the username AND the color in the button. Any ideas?

    Manuel

    Wednesday, November 28, 2012 2:31 PM
  • Hi,

    Then you could define two global variable. And transfer that as parameters. I have a test on my side, that will work like a charm.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Thursday, November 29, 2012 2:07 AM
  • Thanks!  I would really like to see your test.  I'm sure I will learn a lot looking at it.

    However I'm afraid that your suggestion does not solve my problem.  Maybe a bit of context will help.  I'm writing a glossary app, and some definitions include references to other definitions.  For example an entry might end like this:  "See also negotiation and mediation"  I want to make these terms links so when the user clicks on it, the app navigates to the referred entry.

    Since I'm using the split app template, to navigate to an entry I have to provide a group and an index.  Thus, I need to pass two parameters when the link is clicked.  Thus if I were to use a global variable, I would need a way to write the appropriate value to the variable when the link is clicked. 

    TIA

    Manuel 

    Thursday, November 29, 2012 4:55 AM
  • Hi,

    The code as follow:

    var username = "bob";
        var color = "red";
    
    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
    function buttonClickHandler(eventInfo) {
            
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!"+username+color;
            document.getElementById("greetingOutput").innerText = greetingString;
            document.getElementById("greetingOutput").style.backgroundColor = "red";        
        }


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Sunday, December 2, 2012 4:11 AM
    Thursday, November 29, 2012 5:56 AM
  • Nice!  Alas, in this example the only value you get from the button is the username. 

    Thursday, November 29, 2012 5:28 PM
  • Hi,

    I am also get "color" in the button click. I suggest you just have a try. Any more question, please feel free to reply.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Friday, November 30, 2012 1:43 AM
  • Dear Song: thanks for your reply.  While you are 100% right on getting the color, all buttons get the same color, "red". I need to define both parameters (color and username) on the button.  I think I might have figured this out.  I'm going to test and I'll let you know.

    Thanks for being patient with the noob!

    Manuel

    Friday, November 30, 2012 2:26 PM
  • I have a solution!  It's not very elegant but it worked.

    I wrote the link like this

    <a href="[4,'N']">nonviolence</a>

    where 4 and 'N' are the params I want to pass to the function.  My event handler goes like this

    navegar: function (eventInfo) {
    eventInfo.preventDefault();
    var idx = 0;
    var llave = "";

    var fin = String(eventInfo.target.href).length;
    var inicio = String(eventInfo.target.href).indexOf("[",0);
    var tira = String(eventInfo.target.href).substring(inicio, fin);

    var vector = eval(tira);

    idx = vector[0];
    llave = String(vector[1]);

    WinJS.Navigation.navigate("/pages/split/split.html", {
    groupKey: llave, selectedIndex: idx
    });

    }

    In this way I can pass as many parameters as needed to the handler. 

    Many thanks for all your help!

    Manuel


    Friday, November 30, 2012 4:07 PM