Question

我一直在创建一个简单的登录页面，我接受值并将其打印回来。我在javascript中编写了一个函数来存储文本框中的输入值。我添加了两个打印语句，只检查我的程序在哪里工作。这是我的剧本。

<html>

<head>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <meta charset="UTF-8">

    <title>Home| Login</title>
</head>


<body>
    <script type="text/javascript">
        function init() {
            document.write("Reached Point 1");
            document.write(document.getElementById("username").value);
            var password = document.getElementById("password").value;
            document.write("Reached Point 2");
        }
    </script>
    <div class="logo"></div>
    <div class="login-block">
        <h1>Login</h1>
        <input type="text" value="" id="username" />
        <input type="text" value="" id="password" />
        <button onclick="init()">Submit</button>

    </div>
</body>

</html>

单击按钮会打印

Reached Point 1，但用户名和Reached Point 2未打印。

Answer 1

文档加载完成后，您无法使用document.write。如果这样做，浏览器将打开一个替换当前文档的新文档。并且当文档被替换时，将不会有任何函数和HTML元素和任何东西。而是使用innerHTML将HTML代码放入元素中。

        function init() {
            document.getElementById("description").innerHTML += "Reached Point 1";
            document.getElementById("description").innerHTML +=  document.getElementById("username").value;
            var password = document.getElementById("password").value;
            document.getElementById("description").innerHTML += "Reached Point 2";
        }

    <div class="logo"></div>
    <div class="login-block">
        <h1>Login</h1>
        <input type="text" value="" id="username" />
        <input type="text" value="" id="password" />
        <button onclick="init()">Submit</button>
        <p id="description"></p>
    </div>

JavaScript无法读取文本框值

1 个答案: