locked
How eventhandlers work in navigation app template

    Question

  • I'm wondering about how eventhandlers work in the navigation app template.

    I'm working on a simple BMI calculator, and I have 2 text-inputs, 1 for weight and 1 for height. When you press the button, a function will calculate your BMI. The problem is just that I don't understand how to connect my button to my function. It seems to be like, my bmi.js is 'local' so my bmi.html can't connect to it (by onclick('')). I tried something about addEventListener or something, but I doesn't work.

    I would like to know how I can connect my button to my function.

    Here's my code:

    bmi.html

                        What's your weight? (in kg)<input id="weightInput" type="text" /><br /><br />
                        What's your height? (in cm)<input id="heightInput" type="text" /> <br /><br />
                        <button id="bmiButton" >Calculate it!</button><br />
                        <div id="bmiOutput"></div>

    bmi.js

    (function () {
        "use strict";
    
        WinJS.UI.Pages.define("/pages/bmi.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                // Registrer eventHandler for 'bmiButton'
                var bmiButton = document.getElementById("bmiButton");
                bmiButton.addEventListener("click", this.buttonClickHandler, false);
            },
    
            unload: function () {
                // TODO: Respond to navigations away from this page.
            },
    
            updateLayout: function (element, viewState, lastViewState) {
                /// <param name="element" domElement="true" />
    
                // TODO: Respond to changes in viewState.
            }, 
    
            buttonClickHandler: function () {
                var weight = document.getElementById("weightInput").value * 1;
                var heightIn = document.getElementById("heightInput").value / 100;
                var height = heightIn * heightIn;
                var bmi = weight / height;
                var bmiOut = "Your BMI is " + bmi + "."
                document.getElementById("bmiOutput").innerText = bmiOut;
            },
    
    
    
        });
    })();

    Sunday, February 10, 2013 8:44 AM

Answers

  • I pasted your code into a new app created from the nav app template, and it actually worked fine, so the basic structure of your code is correct.

    I'm wondering about the URI you have in WinJS.UI.Pages.define. You have "/pages/bmi.html"--is this actually where the page resides in your project? The structure of the nav app project typically makes subfolders underneath pages, as in pages/home/home.html. I ask this because if the URI you have in WinJS.Pages.define doesn't match the actual path of the HTML in your project, then none of the page code will execute.

    So can you verify that the methods in your ready event are getting called? Set a breakpoint on your addEventListener call and see if that gets hit. If not, check the path for the html. You can also double-check that the URI to this page that's in default.html matches the one in WinJS.UI.Pages.define.

    By the way, if you need to reference your page control in the callback via the this variable, you need to add a listener like so:

    bmiButton.addEventListener("click", this.buttonClickHandler.bind(this), false);

    The .bind(this) makes sure that the handler is called with the parameter to bind as the object context (what this refers to in the method). See this forum post for more details.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    • Marked as answer by Potices Monday, February 11, 2013 7:54 AM
    Sunday, February 10, 2013 8:15 PM

All replies

  • I don't know if I explained the problem in a worng way (cause nobody answered) but here it is Again.

    I just want to know, how I can make a button and then connect it to my function. Very simple. Like a button, when you click it, you'll see a text come in the page body. Or maybe just show a message like alert('')? Just anything, cause I can't figure out how to do it by my own. I can do it on the blank template, but not in the nabigation template. So how can I do it?

    - Please answer, cause I'm really stuck, and I do have a lot of time in this week.

    Sunday, February 10, 2013 1:02 PM
  • I pasted your code into a new app created from the nav app template, and it actually worked fine, so the basic structure of your code is correct.

    I'm wondering about the URI you have in WinJS.UI.Pages.define. You have "/pages/bmi.html"--is this actually where the page resides in your project? The structure of the nav app project typically makes subfolders underneath pages, as in pages/home/home.html. I ask this because if the URI you have in WinJS.Pages.define doesn't match the actual path of the HTML in your project, then none of the page code will execute.

    So can you verify that the methods in your ready event are getting called? Set a breakpoint on your addEventListener call and see if that gets hit. If not, check the path for the html. You can also double-check that the URI to this page that's in default.html matches the one in WinJS.UI.Pages.define.

    By the way, if you need to reference your page control in the callback via the this variable, you need to add a listener like so:

    bmiButton.addEventListener("click", this.buttonClickHandler.bind(this), false);

    The .bind(this) makes sure that the handler is called with the parameter to bind as the object context (what this refers to in the method). See this forum post for more details.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    • Marked as answer by Potices Monday, February 11, 2013 7:54 AM
    Sunday, February 10, 2013 8:15 PM
  • Thank you very much, I'll go to bed now and I will then check if it Works, when I wake up.

    Your right, I forgot the bmi-folder, and the right syntax is "/pages/bmi/bmi.html".

    Again, I'll go to bed and then check it out. But I'm very very very happy for your help. It really means a lot. Thank you.

    Sunday, February 10, 2013 9:28 PM