Question

使用空白模板我的default.html有以下

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

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

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <br />
    <h1 id="msg" />
    <br />
    <button id="btn">Say Hello</button>
</body>
</html>

我的default.css

body {}

这是default.html

// 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;

    app.onactivated = function (args) {
        WinJS.UI.processAll().done(
            function () {
                var btn = document.getElementById("btn");
                btn.addEventListener("click", btnClick);
            });
    };

    function btnClick(mouseEvent) {
        document.getElementById("msg").innerText = "Hello there";
    }
    app.start();
})();

问题是当我点击按钮时，会显示文本Hello，但按钮会消失。有人可以提出任何想法，因为我做错了导致按钮无法显示。

Answer 1

您的问题在于标记 - 请勿在HTML文档中使用XML标记。

当浏览器看到：

<h1 />

它只找到一个H1开始标记（/没有意义），并且在找到结束标记或匹配</之前不会关闭该元素。如果没有找到，它将回退到纠错。可能（虽然不一定）浏览器是图灵：

<h1 id="msg" />
    <br />
    <button id="btn">Say Hello</button>

成：

<h1 id="msg">
    <br>
    <button id="btn">Say Hello</button>
</h1>

因此，当您替换innerText（符合W3C的等效项为textContent）时，H1的全部内容将替换为提供的文本，从而导致：

<h1 id="msg">Hello there</h1>

在HTML文档中可以或应该使用XML样式标记是一种常见的误解，然而这是由于在XHTML时代中止将HTML更改为XML而中止的尝试所造成的谬误。在HTML文档中使用HTML标记，为XML文档保存XML。

Answer 2

尝试使用它，value是显示的文本，type是输入的类型。

<input id="btn" value="button" type="button">

“<button>将隐式提交，如果您想在未提交的情况下使用表单中的按钮，则会导致问题。因此，使用<input type="button">（或<button type="button">）的另一个原因

如果没有类型，button会隐式接收submit的类型。表单中有多少提交按钮或输入无关紧要，其中任何一个显式或隐式输入为提交，单击时都会提交表单。“

表示对Travis J的报价。

您还需要将javascript getElementById更改为

document.getElementById("btn").value = "Hello there";

Answer 3

我不知道为什么，但将<h1 id="msg" />更改为<h1 id="msg"></h1>解决了问题

为什么按钮本身在点击事件后仍然不可见，因为点击事件正在更新标签文本

3 个答案: