<div> variable not displaying

StackOverflow https://stackoverflow.com/questions/22582910

Question

I am following Microsoft's tutorial on making metro apps in JavaScript. Link When you click the button, it's supposed to say "Hello nameenetered!" Mine does not do this. I have gone through the code up and down and cannot find a difference. My greetingOutput div will just not display. I changed the code to make the button display greetingOutput, which works, so I know my eventhandler and function are working. Here's my code:

Default.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jsHelloWorld</title>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

<!-- jsHelloWorld references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<h1 class="headerClass">Hello World!</h1>
<div class="mainContent">
    <p>What's your name?</p>
    <input id="nameInput" type="text"></input>
    <button id="helloButton">Say "Hello"</button>
    <div id="greetingOutput"></div>
    <label for="ratingControlDiv">
        Rate this Greeting:
    </label>
    <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
    </div>
    </div>
 </body>
 </html>

Default.js

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

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.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll());

        var helloButton = document.getElementById("helloButton");
        helloButton.addEventListener("click", buttonClickHandler, false);
    }
};

app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. You might use the
    // WinJS.Application.sessionState object, which is automatically
    // saved and restored across suspension. If you need to complete an
    // asynchronous operation before your application is suspended, call
    // args.setPromise().
};

function buttonClickHandler(eventInfo) {

    var userName = document.getElementById("nameInput").value;
    var greetingString = "Hello, " + userName + "!";
    document.getElementById("greetingOutput").innertext = greetingString;
    helloButton.innerText = greetingOutput.innertext

}

app.start();
})();

default.css

body {
}

.headerClass {
margin-top: 45px;
margin-left: 120px;
}

.mainContent {
margin-top: 31px;
margin-left: 120px;
margin-bottom: 50px;
}

#greetingOutput {
height: 20px;
margin-bottom:
}
Était-ce utile?

La solution

javascript is case sensitive, innerText should be written with capital T , try this 

document.getElementById("greetingOutput").innerText = greetingString;
                                           ....^

and remove this line 

helloButton.innerText = greetingOutput.innertext  // REMOVE THIS
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top