Question

我正在关注微软关于用JavaScript制作地铁应用程序的教程。 Link单击按钮时，应该说“Hello nameenetered！”我不这样做。我已经完成了上下代码，无法找到差异。我的greetingOutput div将无法显示。我更改了代码，使按钮显示greetingOutput，这是有效的，所以我知道我的eventhandler和函数正在工作。这是我的代码：

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:
}

Answer 1

javascript区分大小写，innerText应使用大写T编写，请尝试此操作

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

并删除此行

helloButton.innerText = greetingOutput.innertext  // REMOVE THIS

<div>变量不显示</div>

1 个答案: