HTML and CSS Reference
In-Depth Information
First off, add the following markup to the body of the page in default.html . The markup consists of
two DIV blocks containing the placeholder for generated number and the button to click to get a new
number. You insert the following markup between the header and footer elements:
<label id="numberLabel">?</label>
<input id="numberButton" type="button" value="Get number" />
Next, open the default.js file and add the following JavaScript functions at the bottom of the file:
function numberButtonClick() {
var number = generateNumber();
document.getElementById("number").innerHTML = number;
function generateNumber() {
var number = 1 + Math.floor(Math.random() * 1000);
return number;
The first function is the handler for the click event on the button. The second function just
generates and returns a random number between 1 and 1000. The final step consists of binding the
click handler to the actual button in the HTML markup. There are a number of ways to do this, the
simplest of which is shown below:
<input id="numberButton" type="button" value="Get number"
onclick="numberButtonClick()" />
A more elegant way—and the recommended way of doing it in Windows 8 programming—
consists of making the binding dynamically as the page is loaded. So open the default.js file and
modify the code of the app.onactivated function, as shown below:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==
activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
"click", numberButtonClick)
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
Search WWH ::

Custom Search